/* ==========================================================================
   Květiny Kašík — v3 design system (matches Figma)
   Naming: Finsweet Client-First
   ========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --c-cream:        #F0E4D3;
  --c-cream-soft:   #F7EDDC;
  --c-cream-deep:   #E5D6BD;
  --c-pink:         #E7C0BD;
  --c-pink-soft:    #F2D7D4;
  --c-coral:        #E57579;
  --c-coral-deep:   #D85D62;
  --c-olive:        #4B5448;
  --c-forest:       #2F3B2F;
  --c-forest-deep:  #1F2A20;
  --c-line:         #DCCBAE;

  --c-ink:          var(--c-forest);
  --c-ink-mute:     var(--c-olive);
  /* Figma má #7A8175, ale na krémové dává jen 2,8–3,5:1 (WCAG AA chce 4,5:1).
     #5B6057 je nejsvětlejší odstín, který projde i na podkladu patičky. */
  --c-ink-light:    #5B6057;
  --c-bg:           var(--c-cream);
  --c-surface:      var(--c-cream-soft);

  /* ---- Typography ---- */
  --ff-sans:    'Google Sans', 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --ff-accent:  'Playfair Display', 'Times New Roman', serif;
  --ff-body:    var(--ff-sans);
  --ff-display: var(--ff-sans);

  --fs-display: clamp(2.8rem, 5.6vw + .25rem, 5.6rem);
  --fs-h1:      clamp(2.4rem, 4vw + .5rem, 4.4rem);
  --fs-h2:      clamp(2rem, 3vw + .5rem, 3.4rem);
  --fs-h3:      clamp(1.35rem, 1vw + 1rem, 1.65rem);
  --fs-lead:    clamp(1rem, .35vw + .9rem, 1.1rem);
  --fs-body:    .98rem;
  --fs-small:   .875rem;
  --fs-eyebrow: .82rem;

  /* ---- Spacing ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---- Radii ---- */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;
  --r-2xl: 60px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --sh-soft:  0 6px 22px rgba(47,59,47,.05), 0 1px 2px rgba(47,59,47,.04);
  --sh-med:   0 16px 44px rgba(47,59,47,.08), 0 2px 6px rgba(47,59,47,.04);
  --sh-hover: 0 28px 64px rgba(47,59,47,.14), 0 4px 10px rgba(47,59,47,.05);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-soft: cubic-bezier(.4,.0,.2,1);
  --d-fast: .28s;
  --d-base: .5s;
  --d-slow: 1s;

  /* ---- Layout ---- */
  --container-large:  1320px;
  --container-medium: 920px;
  --container-small:  640px;
  --padding-global:   clamp(20px, 4vw, 56px);
  --section-pad-y:    clamp(72px, 9vw, 140px);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* Skok na kotvu (Nabízíme → #sluzby atd.) zastaví sekci pod pevnou navigací, ne pod ní.
   72 px = výška navigace po odscrollování (menší varianta), k tomu vzduch, který
   roste s šířkou: telefon 96 px, 1440 ~115 px, 1920 120 px. Platí globálně. */
html { scroll-behavior: smooth; scroll-padding-top: calc(72px + clamp(24px, 3vw, 48px)); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
dl, dd, dt, p, h1, h2, h3, h4 { margin: 0; }
::selection { background: var(--c-pink); color: var(--c-forest); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.padding-global { padding-left: var(--padding-global); padding-right: var(--padding-global); }
.container-large  { max-width: var(--container-large);  margin-inline: auto; }
.container-medium { max-width: var(--container-medium); margin-inline: auto; }
.container-small  { max-width: var(--container-small);  margin-inline: auto; }

.main-wrapper > section { padding-block: var(--section-pad-y); position: relative; }
.main-wrapper > section + section { padding-top: 0; }
/* odsazení shora roste se šířkou, ale strop podle výšky okna — na nízkém notebooku
   se zmenší, aby hero tlačítko zůstalo na první obrazovce (na 1920×1080 beze změny) */
.main-wrapper > section:first-child { padding-top: clamp(104px, min(14vw, 19vh), 200px); padding-bottom: clamp(60px, 8vw, 120px); }

/* ==========================================================================
   Typography
   ========================================================================== */
.heading-display, .heading-h1, .heading-h2, .heading-h3,
.card_title, .location-card_title, .quote_text {
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--c-ink);
}
.heading-display { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.035em; font-weight: 500; }
.heading-h1 { font-size: var(--fs-h1); line-height: 1.02; }
.heading-h2 { font-size: var(--fs-h2); line-height: 1.04; }
.heading-h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 500; }

.heading-display em,
.heading-h2 em,
.heading-h3 em {
  font-family: var(--ff-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--c-coral);
}

.text-style-lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-ink-mute);
  max-width: 50ch;
  font-weight: 400;
}
.text-style-body { color: var(--c-ink-mute); max-width: 54ch; line-height: 1.65; }
.text-style-body em { font-family: var(--ff-accent); font-style: italic; color: var(--c-ink); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0;
  color: var(--c-olive);
  font-weight: 500;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: currentColor; opacity: .5;
}
/* A1: Figma ma kratke navesy sekci verzalkami. Netyka se hero navesu
   ani @kvetinykasik - ty jsou malymi i v navrhu, proto modifikator. */
.eyebrow.is-caps { text-transform: uppercase; }

/* ==========================================================================
   Buttons
   ========================================================================== */
/* Tlačítka dle Figmy: bílá pilulka 13,1px, padding 12/21/13, mezera 21px.
   Varianty — is-cream (sekundární), is-ghost (obrys), is-coral (CTA), is-primary (nav). */
.button {
  --bg: #fff;
  --fg: var(--c-forest);
  --bd: transparent;
  display: inline-flex;
  align-items: center;
  gap: 21px;
  padding: 12px 21px 13px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-size: .82rem;
  letter-spacing: .072px;
  font-weight: 500;
  transition: transform var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
  will-change: transform;
  box-shadow: 0 6px 11px rgba(47,59,47,.05), 0 1px 1px rgba(47,59,47,.04);
}
.button:hover { transform: translateY(-2px); box-shadow: var(--sh-med); }
.button:active { transform: translateY(0); }
.button .button_icon { width: 14px; height: 14px; transition: transform var(--d-base) var(--ease-out); }
.button:hover .button_icon { transform: translateX(4px); }

.button.is-primary {
  --bg: var(--c-forest); --fg: var(--c-cream-soft);
}
.button.is-primary:hover { --bg: var(--c-forest-deep); }

.button.is-pink {
  --bg: var(--c-pink); --fg: var(--c-forest);
}
.button.is-pink:hover { --bg: #DBAFAB; }

/* sekundární — "Chci květinovou výzdobu" */
.button.is-cream { --bg: var(--c-cream-soft); }
.button.is-cream:hover { --bg: var(--c-cream-deep); }

/* hlavní CTA — "Do e-shopu": větší, 14,4px, padding 17/29 */
.button.is-coral {
  --bg: var(--c-coral); --fg: #fff;
  font-size: .9rem;
  padding: 17px 29px;
  gap: 10px;
}
.button.is-coral .button_icon { width: 16px; height: 16px; }
.button.is-coral:hover { --bg: var(--c-coral-deep); }

.button.is-ghost {
  --bg: transparent; --fg: var(--c-forest); --bd: var(--c-forest);
  box-shadow: none;
}
.button.is-ghost:hover { --bg: var(--c-forest); --fg: var(--c-cream-soft); --bd: var(--c-forest); box-shadow: none; }

.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-5); }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 20px;
  background: rgba(240,228,211,.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--ease-out), padding var(--d-base) var(--ease-out);
}
.navbar.is-scrolled { padding-block: 12px; border-bottom-color: var(--c-line); }

.navbar_inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.navbar_logo { display: inline-flex; align-items: center; color: var(--c-forest); }
.navbar_logo img { height: 32px; width: auto; display: block; }

.navbar_menu { display: flex; gap: clamp(18px, 2.4vw, 36px); justify-self: center; }
.navbar_link {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .92rem;
  color: var(--c-forest);
  font-weight: 500;
  padding: 6px 2px;
}
.navbar_link::after {
  content: ""; position: absolute; inset: auto 0 -2px 0;
  height: 1px; background: var(--c-coral);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-base) var(--ease-out);
}
.navbar_link:hover { color: var(--c-coral); }
.navbar_link:hover::after { transform: scaleX(1); }

/* vždy do posledního sloupce — na mobilu je menu schované a tlačítka by jinak
   spadla do prostředního sloupce hned vedle loga */
.navbar_actions { display: flex; align-items: center; gap: 10px; grid-column: 3; justify-self: end; }
/* ==========================================================================
   Rozbalovací menu „Nabízíme" (Figma varianta 1:628, panel 1:767)
   ========================================================================== */
.navbar_item { position: relative; display: flex; align-items: center; }
.navbar_link-icon { width: 15px; height: 15px; flex: none; }
.navbar_link--drop[aria-expanded="true"] { color: var(--c-coral); }
.navbar_link--drop[aria-expanded="true"] .navbar_link-icon { transform: rotate(180deg); }
.navbar_link-icon { transition: transform var(--d-fast) var(--ease-out); }

.navmenu {
  position: absolute;
  top: calc(100% + 14px);
  left: -24px;                 /* Figma: levá hrana 24,5px vlevo od odkazu */
  width: 741px;                /* Figma: 741×262 */
  max-width: calc(100vw - 2 * var(--padding-global));
  display: grid;
  /* Figma: sloupce na x 34 / 275 / 521 v panelu 741 → 241 / 246 / zbytek */
  grid-template-columns: 241px 246px 1fr;
  padding: 32px 34px 25px;
  background: var(--c-cream-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-soft);
  /* Figma má panel na opacity 0.9; rozostření podkladu drží text čitelný i nad fotkou
     (stejný postup jako u navigace) */
  opacity: .9;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  z-index: 20;
}
.navmenu[hidden] { display: none; }
/* Neviditelný most přes 14px mezeru mezi odkazem a panelem — bez něj myš při
   cestě dolů vypadne z hover zóny a menu se zavře. */
.navmenu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}
.navmenu_col { display: flex; flex-direction: column; }
.navmenu_head {
  font-size: 1rem; line-height: 1.875;    /* 16px / 30px */
  font-weight: 500;
  color: var(--c-ink);
  margin-bottom: 0;
}
/* druhá skupina ve sloupci (Ostatní) */
.navmenu_head--sub { margin-top: 14px; }
/* oddělení svátků (Dušičky–Valentýn) od ročních období */
.navmenu_sep { display: block; width: 120px; height: 1px; margin: 7px 0; background: color-mix(in srgb, var(--c-line), var(--c-olive) 18%); }
.navmenu_link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 1rem; line-height: 1.875;    /* 16px / 30px */
  font-weight: 500;
  color: var(--c-ink);
  transition: color var(--d-fast) var(--ease-out);
}
.navmenu_item {
  font-size: .875rem; line-height: 1.786; /* 14px / 25px */
  color: var(--c-ink);
  transition: color var(--d-fast) var(--ease-out);
}
.navmenu_link:hover, .navmenu_item:hover { color: var(--c-coral); }
.navmenu_ext { width: 15px; height: 15px; flex: none; }

/* animace otevření */
.navmenu {
  transform: translateY(-8px);
  transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.navmenu.is-open { opacity: .9; transform: translateY(0); }
.navmenu:not(.is-open) { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .navmenu { transition: none; transform: none; }
}

/* pod 900px se navigace skrývá do burgeru — dropdown se neuplatňuje */
@media (max-width: 900px) {
  .navmenu { display: none !important; }
}

/* 44px = doporučená velikost dotykového cíle; záporný okraj srovná čárky
   s pravou hranou obsahu, stejně jako logo sedí na levé */
.navbar_burger { display: none; width: 44px; height: 44px; margin-right: -11px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.navbar_burger span { display: block; width: 22px; height: 2px; border-radius: 1px; background: var(--c-forest); transition: transform var(--d-base) var(--ease-out), opacity var(--d-fast) var(--ease-out); }
/* otevřené menu → křížek: prostřední zmizí, krajní se posunou na střed (8px) a zkříží */
.navbar_burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navbar_burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar_burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.section_hero { overflow: clip; position: relative; }

.hero_grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  min-height: clamp(520px, 72vh, 720px);
}
/* Typografie hero bloku odpovídá Figmě (hodnoty v závorkách = Figma @1920) */
.hero_content {
  max-width: 582px;
  display: flex; flex-direction: column;
  gap: 16px;
  align-self: start;      /* Figma: obsah začíná na horní hraně kontejneru, necentruje se */
  position: relative; z-index: 2;
}
.hero_content .eyebrow {
  /* blok, ne inline-flex: linka ::before je tu skrytá a flex odstup by mezi
     „zahradnictví" a <span class="hero_place"> přidal 10 px navíc k mezeře */
  display: block;
  font-size: .95rem;      /* 15.2px */
  line-height: 1.55;      /* 23.56px */
  color: var(--c-forest);
}
.hero_content .eyebrow::before { display: none; }

.hero_content .heading-display {
  /* jen kurzívní řádek je korálový, zbytek tmavý */
  color: var(--c-ink);
  font-weight: 500;
  font-size: clamp(2.8rem, min(4.6vw + .3rem, 9vh), 5rem);  /* 80px; na nízkém okně menší */
  line-height: 1.0625;                             /* 85px */
  letter-spacing: -0.049em;                        /* -3.92px */
}

.hero_content .text-style-lead {
  font-size: clamp(1rem, .5vw + .85rem, 1.15rem);  /* 18.4px */
  line-height: 1.55;                                /* 28.52px */
  max-width: 582px;
}

/* Figma dělí blok mezerou 62px, eyebrow drží u nadpisu na 16px */
.hero_content .text-style-lead,
.hero_content .button-row { margin-top: clamp(18px, min(2.4vw, 4.3vh), 46px); }
/* zalomení úvodního textu jen pro tablet a telefon (viz max-width: 900px) */
.hero_br { display: none; }

/* Hero CTA míří na sekci níž, takže šipka ukazuje dolů */
.hero_content .button:hover .button_icon { transform: translateY(3px); }

/* Figma: sekce služeb začíná ještě v zóně hero (y 875 z 1063) — karty se
   vsouvají do prázdného spodku hero. Jen desktop; na mobilu hero končí těsně. */
@media (min-width: 901px) {
  .section_hero + .section_services { margin-top: max(-160px, -8.3vw); }
  /* Mezera tlačítko → karty = rytmus sekcí (--section-pad-y) jako mezi ostatními
     sekcemi. Výšku hero určuje obsah, ne okno (dřív min. 72vh → mezera 64–167 px).
     padding = rytmus + přesah karet − spodní padding hero (první sekce, ř. ~107). */
  .hero_grid { min-height: 0; }
  .hero_visual { min-height: 0; }
  .hero_content { padding-bottom: calc(var(--section-pad-y) + min(160px, 8.3vw) - clamp(60px, 8vw, 120px)); }
}

.hero_visual {
  position: relative;
  min-height: clamp(440px, 60vh, 620px);
  height: 100%;
  isolation: isolate;
}
/* Rám kytice. Nese pozici i velikost — obrázek a odznak jsou v něm
   ukotvené v procentech, takže spolu drží na libovolné šířce okna. */
.hero_handimage-wrap {
  position: absolute;
  top: 32.2%;
  /* pravá hrana sedí na okraji okna, aby ruka odcházela ze stránky */
  right: calc(-1 * max(var(--padding-global), (100vw - var(--container-large)) / 2));
  /* nad ~1600px roste s oknem, aby kytice nezůstala trčet u kraje */
  width: min(max(118.5%, 48vw), 1000px);
  aspect-ratio: 1486 / 1731;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}
/* Desktop na nízkém okně: kytice drží velikost podle šířky (nezmenšuje se),
   jen se přichytí pod navigaci a zbytek se doscrolluje.
   --bq-top: poloha nesmí klesnout pod hodnotu, při které horní hrana odznaku leží
     ~16 px pod navigací: 102 (navigace 86 + 16) − padding sekce + 0,2563 × šířka
     (= 0,22 × výška rámu 1731/1486) + půlka odznaku. Šířku tu odhadujeme shora
     min(1000px, 55vw) — 118,5 % se v `top` použít nedá (% by bylo z výšky).
   ::before je rozpěrka, která hero protáhne tak, aby se kytice dole neuřízla:
     padding-top v % se počítá ze ŠÍŘKY, takže tu jde použít přesný vzorec šířky
     rámu. Viditelný konec stonků leží 0,22 × výšky rámu pod středem (spodních
     ~28 % obrázku je průhledných), tj. 0,2563 × šířka; pod ním 48 px ke kartám.
     Pro top 32,2 %: 0,678 × výška ≥ 0,2563 × šířka + 48 → výška ≥ 0,378 × šířka + 71 px.
   Na 1920×1080 a větších platí 32,2 % a výška daná obsahem, tedy beze změny. */
@media (min-width: 901px) {
  .hero_visual {
    --bq-w: min(max(118.5%, 48vw), 1000px);
    --bq-top: calc(102px - clamp(104px, min(14vw, 19vh), 200px) + 0.2563 * min(1000px, 55vw) + clamp(100px, 7.2vw, 137px) / 2);
  }
  .hero_visual::before {
    content: ""; display: block;
    padding-top: max(calc(0.378 * var(--bq-w) + 71px), calc(var(--bq-top) + 0.2563 * var(--bq-w) + 48px));
  }
  .hero_handimage-wrap { top: max(32.2%, var(--bq-top)); }
}

.hero_handimage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: rotate(-24.72deg);
  transform-origin: center center;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(47,59,47,.10));
}
/* Dle Figmy (node 1:153): watermark vlevo za nadpisem, přetéká levý okraj okna */
.hero_pattern {
  position: absolute;
  top: 12%;
  left: min(-260px, -21vw);
  width: clamp(560px, 67vw, 1300px);
  height: auto;
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}

/* Hero circular rotating badge — "DENNĚ ČERSTVÉ KVĚTINY" on circular path */
.hero_badge {
  --hero-badge-size: clamp(100px, 7.2vw, 137px);
  position: absolute;
  /* střed odznaku ukotvený na rám kytice (Figma node 1:175: střed ~2 % / 28 % rámu) */
  top: calc(28% - var(--hero-badge-size) / 2);
  left: calc(2.2% - var(--hero-badge-size) / 2);
  width: var(--hero-badge-size);
  height: var(--hero-badge-size);
  pointer-events: auto;
  display: grid; place-items: center;
  background: var(--c-cream-soft);
  border-radius: 50%;
  z-index: 3;
  color: var(--c-forest);
  box-shadow: var(--sh-soft);
  transition: transform var(--d-base) var(--ease-out);
}
.hero_badge:hover { transform: scale(1.05); }
.hero_badge-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: spin 22s linear infinite;
}
.hero_badge-core {
  position: relative;
  display: grid; place-items: center;
  width: 56%; height: 56%;
}
/* béžové SVG vybarvené maskou přesně na --c-coral (řetěz filtrů dával křiklavě růžovou) */
.hero_badge-icon {
  display: block;
  width: 100%; height: 100%;
  background: var(--c-coral);
  -webkit-mask: url('images/kytka_pattern.svg') center / contain no-repeat;
          mask: url('images/kytka_pattern.svg') center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) { .hero_badge-ring { animation: none; } }

/* ==========================================================================
   Section header
   ========================================================================== */
.section_header {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 880px;
}
.section_header--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none; }
.section_header_text { max-width: 46ch; }
@media (max-width: 800px) { .section_header--row { flex-direction: column; align-items: flex-start; } }

/* ==========================================================================
   Cards (base)
   ========================================================================== */
.card {
  position: relative;
  background: var(--c-cream-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-soft);
  overflow: hidden;
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
  will-change: transform;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-hover); }

/* ==========================================================================
   Services
   ========================================================================== */
.services_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
}
.service-card {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
}
.service-card .card_media {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  background: var(--c-cream-deep);
}
.service-card .card_media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
  will-change: transform;
}
.service-card:hover .card_media img { transform: scale(1.06); }
.card_chip {
  position: absolute; top: 16px; left: 16px;
  font-size: .72rem;
  color: var(--c-forest);
  background: rgba(247,237,220,.95);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-weight: 500;
  backdrop-filter: blur(6px);
}

.card_body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 22px 22px 24px;
  align-items: end;
}
.card_title {
  font-size: clamp(1.3rem, .65vw + 1rem, 1.62rem);   /* „Svatební výzdoba" na 1 řádek @1920 */
  font-weight: 500;
  grid-column: 1 / 2;
  color: var(--c-forest);
  line-height: 1.1;
  letter-spacing: -0.024em;
}
.card_text {
  grid-column: 1 / 2;
  font-size: .85rem;
  color: var(--c-olive);
  max-width: 28ch;
  margin-top: 6px;
  line-height: 1.5;
}
.card_arrow {
  grid-column: 2 / 3; grid-row: 1 / 3;
  width: 40px; height: 40px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-cream-soft);
  transition: transform var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
  align-self: end;
}
.card_arrow svg { width: 14px; height: 14px; }
.service-card:hover .card_arrow {
  background: var(--c-coral); color: #fff; border-color: var(--c-coral);
  transform: rotate(-12deg);
}

/* ==========================================================================
   Story / About
   ========================================================================== */
.section_story { position: relative; overflow: clip; /* rotovaný watermark ::before jinak přetéká o ~4px */ }
/* Figma: mezera koláž → galerie je 126px; sekce + pad galerie musí dát dohromady ~121 */
.section_story { padding-bottom: clamp(48px, 5vw, 96px) !important; }
.section_story::before {
  content: "";
  position: absolute;
  top: -3%; right: 1%;
  width: clamp(220px, 22vw, 360px);
  height: clamp(220px, 22vw, 360px);
  background: url('images/kytka_pattern.svg') center/contain no-repeat;
  opacity: .45;
  pointer-events: none;
  transform: rotate(8deg);
  z-index: 0;
}
.section_story > * { position: relative; z-index: 1; }

.story_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  row-gap: 0;               /* odstup citace nese její margin-top */
  align-items: center;
}
/* koláž přes oba řádky (úvod + citace), svisle na střed — jako dřív, kdy byla
   citace uvnitř bloku s textem */
.story_visual { grid-row: 1 / span 2; }
/* text dosedá dolů k citaci, takže spolu tvoří jeden blok jako dřív */
.story_grid > .story_content { align-self: end; }
/* Koláž dle Figmy (nody 1:542/1:545/1:550): sloupec 612, celek 634×903 */
.story_visual {
  position: relative;
  aspect-ratio: 612 / 903;
}
.story_image { position: absolute; margin: 0; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--sh-med); }
.story_image img { width: 100%; height: 120%; object-fit: cover; position: relative; top: -10%; }
.story_image--main {
  top: 0; left: 0;
  width: 74%; aspect-ratio: 453 / 665;   /* Figma: 453×665 */
  border-radius: var(--r-xl);
}
.story_image--accent {
  top: 51.2%; left: 29.6%;               /* Figma: překryv ~60 % šířky, ~30 % výšky */
  width: 74%; aspect-ratio: 453 / 441;   /* Figma: 453×441 */
  border-radius: var(--r-xl);
}

/* Circular stamp with rotating text "KVĚTINY KAŠÍK · OD ROKU 1992" + K-symbol.
   Anchored: top-right CORNER of the badge = top-right corner of the accent photo.
   Zero horizontal overflow → no risk of overlapping the text column on any width. */
.story_stamp {
  --stamp-size: clamp(110px, 8.1vw, 156px);   /* Figma: 156px @1920 */
  position: absolute;
  /* Figma (1:550): střed razítka na (97 %, 45.6 %) vizuálu — u pravé hrany hlavní fotky */
  top: calc(45.6% - var(--stamp-size) / 2);
  left: calc(97% - var(--stamp-size) / 2);
  right: auto;
  width: var(--stamp-size);
  height: var(--stamp-size);
  display: grid; place-items: center;
  z-index: 4;
  background: var(--c-pink);
  border-radius: 50%;
  box-shadow: var(--sh-med);
  color: var(--c-forest);
}
.story_stamp-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: spin 22s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .story_stamp-ring { animation: none; } }
.story_stamp-core {
  position: relative;
  display: grid; place-items: center;
  width: 56%; height: 56%;
}
.story_stamp-mono {
  width: 100%; height: 100%;
  object-fit: contain;
  /* Optical centering — K-symbol is visually heavier on the right, shift left */
  transform: translateX(-8%);
}
@keyframes spin { to { transform: rotate(360deg); } }

.story_content { display: flex; flex-direction: column; gap: 20px; }
.story_content .heading-h2 { margin-bottom: 4px; }

/* ==========================================================================
   Quote
   ========================================================================== */
/* Citace sedí dle Figmy v pravém sloupci sekce O nás, pod tlačítky (node 1:281) */
.quote {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  margin: 0;
}
/* Desktop: v pravém sloupci pod tlačítky, stejná šířka i levá hrana jako odstavce
   nad ní (.text-style-body má také 54ch) */
.story_grid > .quote {
  grid-column: 2;
  /* +20 px = odstup (gap) bloku s textem, ve kterém citace dřív byla */
  margin-top: calc(clamp(40px, 6vw, 110px) + 20px);
  align-self: start;
  justify-self: start;
  width: 100%;
  max-width: 54ch;
}
.story_grid .quote_text { max-width: none; }
.quote_mark { width: 36px; height: 28px; color: var(--c-pink); }
.quote_text {
  font-family: var(--ff-accent); font-style: italic;
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.1rem);
  line-height: 1.3; max-width: 26ch;
  color: var(--c-forest);
  font-weight: 400;
  margin: 0;
}
.quote_author { font-size: .9rem; color: var(--c-olive); }
.quote_author span { color: var(--c-ink-light); }

/* ==========================================================================
   Gallery — full-width, 2 rows, scroll parallax (opposite directions)
   ========================================================================== */
.section_gallery {
  padding-top: clamp(16px, 1.6vw, 30px) !important;
  padding-bottom: clamp(72px, 9vw, 140px) !important;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: 8px;   /* Figma: 8px mezi řádky */
}
.section_gallery + section { padding-top: clamp(28px, 2.5vw, 48px) !important; }   /* Figma: nadpis Prodejny ~45px pod galerií */
/* skok na #prodejny by kvůli tomu paddingu zastavil o 28–48 px níž než u ostatních sekcí */
.section_gallery + section { scroll-margin-top: calc(-1 * clamp(28px, 2.5vw, 48px)); }
.gallery_track {
  /* musí odpovídat driftRange() v main.js */
  --drift: min(140px, 10vw);
  display: grid;
  /* poměry sloupců dle Figmy (566/566/350/453); fr místo vw, aby pás vždy
     přesně vyplnil svou šířku */
  grid-template-columns: 566fr 566fr 350fr 453fr;
  gap: 8px;   /* Figma: 8px mezi fotkami */
  /* pás je o dvojnásobek posunu širší a začíná o posun vlevo mimo obrazovku,
     takže ani v krajní poloze parallaxu nevznikne u okraje prázdné místo */
  width: calc(100% + 2 * var(--drift) + 4px);
  margin-inline-start: calc(-1 * var(--drift) - 2px);
  will-change: transform;
}
.gallery_track--bottom {
  grid-template-columns: 453fr 350fr 566fr 566fr;
}
.gallery_item {
  margin: 0;
  height: clamp(280px, 25.4vw, 488px); /* Figma: 488px @1920 */
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-cream-deep);
}
.gallery_item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.gallery_item:hover img { transform: scale(1.05); }

/* ==========================================================================
   Locations — photo at top
   ========================================================================== */
/* Figma: dvě karty ve dvou sloupcích ze tří, poznámka ve třetím svisle na střed */
.locations_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
  align-items: start;
}
.locations_note {
  align-self: center;
  justify-self: center;
  text-align: center;
  max-width: 30ch;
  margin: 0;
}
.locations_note em {
  font-family: var(--ff-accent);
  font-style: italic;
  color: var(--c-coral);
}
.location-card {
  display: flex; flex-direction: column;
  background: var(--c-cream-soft);
  position: relative;
  overflow: hidden;
}
.location-card_media {
  aspect-ratio: 425 / 315;   /* dle Figmy */
  overflow: hidden;
  background: var(--c-cream-deep);
}
.location-card_media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.location-card:hover .location-card_media img { transform: scale(1.05); }

.location-card_body {
  /* tělo karty ve Figmě přesahuje přes spodek fotky (98 z 425 šířky ≈ 23 %) */
  margin-top: -23%;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--c-cream-soft);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 24px;
  position: relative;
  flex: 1;
}
.location-card_body::after {
  content: "";
  position: absolute;
  bottom: -51px; right: -51px;
  width: 220px; height: 220px;
  background: url('images/kytka_pattern.svg') center/contain no-repeat;
  opacity: .55;
  pointer-events: none;
  transform: rotate(-84deg);
  z-index: 0;
}
.location-card_body > * { position: relative; z-index: 1; }

.location-card_head { display: flex; flex-direction: column; }
/* popisky "PRODEJNA / ADRESA / …" sdílí jeden styl (Figma: Term upper) */
.location-card_term,
.location-card_meta dt {
  font-size: .75rem;              /* 12px — Figma 11,5px, pod minimem čitelnosti */
  line-height: 1.55;
  letter-spacing: .04em;          /* 0,461px */
  text-transform: uppercase;
  color: var(--c-coral);
  font-weight: 500;
}
.location-card_title {
  font-size: 1.8rem;              /* 28,8px */
  font-weight: 500;
  font-family: var(--ff-display);
  color: var(--c-forest);
  line-height: 1.55;              /* 44,64px */
  letter-spacing: -.025em;
}
.location-card_city {
  font-size: .92rem;              /* 14,7px */
  line-height: 1.55;
  color: var(--c-ink-light);
  font-weight: 400;
}
.location-card_meta { display: flex; flex-direction: column; gap: 16px; }
.location-card_meta div { padding-bottom: 17px; border-bottom: 1px solid var(--c-line); }
.location-card_meta div:last-child { border-bottom: 0; padding-bottom: 0; }
.location-card_meta dt { margin-bottom: 5px; }
.location-card_meta dd { font-size: .92rem; color: var(--c-forest); line-height: 1.55; }
.location-card_meta a:hover { color: var(--c-coral); }
.location-card .button { align-self: flex-start; gap: 10px; padding: 13px 21px; }

/* ==========================================================================
   E-shop CTA — van photo + pink panel
   ========================================================================== */
/* Figma: mezera e-shop panel → Sledujte nás je 164px */
.section_eshop-cta { padding-bottom: clamp(96px, 8.5vw, 164px) !important; }
.eshop-cta {
  position: relative;
  border-radius: var(--r-lg);                 /* Figma: 32px */
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;             /* Figma: fotka a panel 50/50 */
  align-items: stretch;
  min-height: clamp(400px, 28vw, 536px);      /* Figma: 536px @1920 */
  background: var(--c-pink-soft);
}
.eshop-cta_visual { position: relative; overflow: hidden; }
.eshop-cta_visual img { position: absolute; top: -10%; left: 0; right: 0; width: 100%; height: 120%; object-fit: cover; }
.eshop-cta_chip {
  position: absolute; bottom: 22px; left: 22px;
  background: rgba(247,237,220,.95);
  color: var(--c-forest);
  font-size: .8rem;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-weight: 500;
  z-index: 2;
  box-shadow: var(--sh-soft);
}
.eshop-cta_content {
  padding: clamp(36px, 4vw, 60px);
  display: flex; flex-direction: column; gap: 22px; justify-content: center;
  position: relative; z-index: 2;
}
.eshop-cta_content .heading-h2 { color: var(--c-forest); }
.eshop-cta_content .heading-h2 em { color: var(--c-coral); }
.eshop-cta::before {
  content: "";
  position: absolute;
  bottom: -60px; right: -60px;
  width: 280px; height: 280px;
  background: url('images/kytka_pattern.svg') center/contain no-repeat;
  opacity: .45;
  pointer-events: none;
  z-index: 1;
  transform: rotate(-12deg);
}

/* ==========================================================================
   Social section — left content + right photo row
   ========================================================================== */
.section_social {}
.section_social { overflow: clip; }
.social_grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;   /* Figma: text ~280px */
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
}
.social_content { display: flex; flex-direction: column; gap: 16px; }
.social_content .heading-h2 { line-height: 1; }
.social_buttons { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px; }
/* dle Figmy: nižší pilulka 40px, ikona 22px vlevo, šipka zarovnaná vpravo */
.social_buttons .button { gap: 10px; padding: 9px 21px; font-size: .82rem; }
.social_buttons .button > svg:first-child { width: 22px; height: 22px; flex: none; }
.social_buttons .button > span { margin-right: auto; }

.social_grid-images {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1vw, 16px);   /* Figma: 16px */
  /* Figma: pás fotek běží až k pravému okraji okna (frame 1:526 končí na x 1916) */
  margin-right: calc(-1 * max(var(--padding-global), (100vw - var(--container-large)) / 2));
}
.social_item {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-cream-deep);
  position: relative;
}
.social_item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter var(--d-base) var(--ease-out);
  filter: saturate(.92);
}
.social_item:hover img { transform: scale(1.07); filter: saturate(1.05); }

/* ==========================================================================
   Footer
   ========================================================================== */
/* Patička dle Figmy (node 1:287) — hodnoty v komentářích jsou z návrhu @1920 */
.section_footer {
  background: var(--c-cream-deep);
  padding-top: clamp(56px, 5.8vw, 111px);   /* Figma: 111px */
  padding-bottom: 32px;                     /* Figma: 32px */
  margin-top: clamp(24px, 2vw, 36px);
  border-top: 1px solid var(--c-line);
}
.footer_top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 49px;                     /* Figma: 49px */
  border-bottom: 1px solid var(--c-line);
}
.footer_brand { max-width: 340px; }         /* Figma: 340px */
.footer_brand .navbar_logo img { height: 32px; }
.footer_tag { margin-top: 21px; color: var(--c-ink-mute); font-size: .92rem; line-height: 1.55; }

.footer_links { display: flex; flex-direction: column; gap: 8px; }
.footer_links h4 {
  /* Figma „Heading 4 upper": 12,2px / 0,486px / #7A8175 — ne korálová */
  font-size: .76rem;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-ink-light);
  margin-bottom: 8px;
  font-weight: 500;
}
.footer_links a, .footer_links p { font-size: .92rem; line-height: 1.55; color: var(--c-forest); }
.footer_links a { transition: color var(--d-fast) var(--ease-out); }
.footer_links a:hover { color: var(--c-coral); }

/* Popisek a loga karet sedí ve Figmě na jednom řádku */
.footer_payments {
  display: flex; align-items: center; gap: 8px;
  margin: 26px 0 0;                         /* Figma: 26px nad řádkem */
  flex-wrap: wrap;
}
.footer_payments-label { font-size: .92rem; line-height: 1.55; color: var(--c-ink-light); }
.footer_payments img { width: 80px; height: auto; }

/* Kruhová tlačítka sociálních sítí (Figma: 38px, bg surface, border line) */
.footer_social { display: flex; gap: 8px; margin-top: 12px; }
.footer_social-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--c-cream-soft);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-forest);
  transition: background var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.footer_social-btn svg { width: 18px; height: 18px; }
.footer_social-btn:hover { background: var(--c-forest); color: var(--c-cream-soft); border-color: var(--c-forest); }

.footer_bottom {
  /* Figma: tři skupiny, prostřední vycentrovaná vůči kontejneru */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-top: 24px;                        /* Figma: 24px */
  font-size: .8rem;                         /* Figma: 12,8px */
  line-height: 1.55;
  color: var(--c-ink-mute);
}
.footer_bottom div { display: flex; gap: 18px; justify-content: center; }
.footer_bottom div a { transition: color var(--d-fast) var(--ease-out); }
.footer_bottom div a:hover { color: var(--c-coral); }
.footer_credit { justify-self: end; }

/* ==========================================================================
   CATEGORY SUBPAGE — Hero
   editorial, photo-led; visually continues homepage (cream palette, soft motion)
   ========================================================================== */
.section_categoryhero {
  overflow: clip;
  position: relative;
}
.section_categoryhero::before {
  content: "";
  position: absolute;
  top: 8%; right: -4%;
  width: clamp(220px, 22vw, 360px);
  height: clamp(220px, 22vw, 360px);
  background: url('images/kytka_pattern.svg') center/contain no-repeat;
  opacity: .38;
  pointer-events: none;
  transform: rotate(16deg);
  z-index: 0;
}
.section_categoryhero > * { position: relative; z-index: 1; }

.categoryhero_inner { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }

.categoryhero_head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: end;
}
.categoryhero_titlecol { display: flex; flex-direction: column; gap: 22px; max-width: 720px; }
.categoryhero_meta { display: flex; flex-direction: column; gap: 22px; max-width: 360px; }
.categoryhero_meta .text-style-lead { max-width: 38ch; }

.categoryhero_crumbs {
  display: inline-flex; gap: 10px; align-items: center;
  font-size: .78rem; color: var(--c-ink-light); letter-spacing: .04em;
}
.categoryhero_crumbs a { color: var(--c-olive); transition: color var(--d-fast) var(--ease-out); }
.categoryhero_crumbs a:hover { color: var(--c-coral); }
.categoryhero_crumbs span[aria-hidden] { opacity: .5; }

.categoryhero_title {
  font-family: var(--ff-display);
  font-size: clamp(2.6rem, 5vw + .25rem, 5rem);
  line-height: 1; letter-spacing: -.03em; font-weight: 500;
  color: var(--c-forest);
}
.categoryhero_title em { font-family: var(--ff-accent); font-style: italic; color: var(--c-coral); font-weight: 400; }

.categoryhero_visual {
  position: relative;
  border-radius: clamp(var(--r-lg), 2.4vw, var(--r-2xl));
  overflow: hidden;
  aspect-ratio: 16/8;
  background: var(--c-cream-deep);
  box-shadow: var(--sh-med);
}
.categoryhero_visual img { width: 100%; height: 110%; object-fit: cover; position: relative; top: -5%; }
.categoryhero_visual .categoryhero_stamp {
  position: absolute; bottom: clamp(20px, 2.4vw, 36px); left: clamp(20px, 2.4vw, 36px);
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(247,237,220,.95);
  color: var(--c-forest);
  font-size: .78rem; letter-spacing: .04em;
  padding: 10px 16px; border-radius: var(--r-pill);
  font-weight: 500; backdrop-filter: blur(6px);
  box-shadow: var(--sh-soft);
}
.categoryhero_stamp::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-coral);
}

@media (max-width: 900px) {
  .categoryhero_head { grid-template-columns: 1fr; gap: 28px; }
  .categoryhero_visual { aspect-ratio: 4/3; }
}

/* ==========================================================================
   CATEGORY SUBPAGE — Editorial sections (per service)
   ========================================================================== */
.section_editorial { padding-block: clamp(56px, 7vw, 112px) !important; }
.section_editorial + .section_editorial { padding-top: 0 !important; }

.editorial_inner { display: flex; flex-direction: column; gap: clamp(32px, 3.6vw, 56px); }

.editorial_head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3vw, 56px);
  align-items: end;
  max-width: 1080px;
}
.editorial_index {
  font-family: var(--ff-accent);
  font-style: italic;
  font-size: 1rem; color: var(--c-coral);
  display: inline-flex; align-items: center; gap: 10px;
}
.editorial_index::before {
  content: ""; width: 22px; height: 1px;
  background: var(--c-coral); opacity: .6;
}
.editorial_title {
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 2.6vw + .6rem, 3rem);
  line-height: 1.04; letter-spacing: -.025em; font-weight: 500;
  color: var(--c-forest);
  margin-top: 10px;
}
.editorial_title em { font-family: var(--ff-accent); font-style: italic; color: var(--c-coral); font-weight: 400; }
.editorial_lede { color: var(--c-ink-mute); max-width: 44ch; line-height: 1.6; font-size: var(--fs-lead); }

@media (max-width: 800px) {
  .editorial_head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
}

/* Editorial gallery — 6-col grid with curated row presets */
.editorial-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.2vw, 22px);
}
.editorial-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-cream-deep);
  position: relative;
}
.editorial-gallery figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease-out);
}
.editorial-gallery figure:hover img { transform: scale(1.05); }

/* Row presets — every item in a row should share an aspect ratio for clean rows */
.eg-half       { grid-column: span 3; aspect-ratio: 4/3; }
.eg-third      { grid-column: span 2; aspect-ratio: 4/5; }
.eg-third-tall { grid-column: span 2; aspect-ratio: 3/4; }
.eg-feature    { grid-column: span 4; aspect-ratio: 16/10; }
.eg-narrow     { grid-column: span 2; aspect-ratio: 4/5; }

@media (max-width: 900px) {
  .editorial-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .editorial-gallery figure { grid-column: span 1 !important; aspect-ratio: 4/5 !important; }
  .editorial-gallery figure.eg-feature { grid-column: span 2 !important; aspect-ratio: 4/3 !important; }
}

/* ==========================================================================
   CATEGORY SUBPAGE — Cross-sell "Další služby"
   ========================================================================== */
.section_crosssell { padding-top: clamp(40px, 5vw, 80px) !important; }
.crosssell_head {
  display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.crosssell_head .heading-h2 { max-width: 14ch; }
.crosssell_head p { max-width: 36ch; color: var(--c-ink-mute); }
@media (max-width: 800px) { .crosssell_head { flex-direction: column; align-items: flex-start; gap: 14px; } }

.crosssell_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}
.crosssell-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-cream-deep);
  aspect-ratio: 4/5;
  isolation: isolate;
  box-shadow: var(--sh-soft);
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.crosssell-card:hover { transform: translateY(-6px); box-shadow: var(--sh-hover); }
.crosssell-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
  z-index: 0;
}
.crosssell-card:hover img { transform: scale(1.06); }
.crosssell-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(31,42,32,.55) 0%, rgba(31,42,32,.15) 38%, rgba(31,42,32,0) 62%);
  z-index: 1;
}
.crosssell-card_body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(20px, 2.2vw, 32px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  color: #fff;
  z-index: 2;
}
.crosssell-card_label {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  font-weight: 500;
}
.crosssell-card_title {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 1.4vw + 1.05rem, 2rem);
  font-weight: 500;
  line-height: 1.1; letter-spacing: -.022em;
  margin-top: 4px;
  color: #fff;
}
.crosssell-card_arrow {
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  transition: background var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.crosssell-card_arrow svg { width: 14px; height: 14px; color: #fff; }
.crosssell-card:hover .crosssell-card_arrow {
  background: var(--c-coral); border-color: var(--c-coral); transform: rotate(-12deg);
}

@media (max-width: 1000px) { .crosssell_grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .crosssell_grid { grid-template-columns: 1fr; } .crosssell-card { aspect-ratio: 3/4; } }

/* ==========================================================================
   E-SHOP SUBPAGE — produkty, kroky, doručení
   staví na .card / .card_media / .button z hlavního design systému
   ========================================================================== */
.product_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}
.product-card { display: flex; flex-direction: column; }
.product-card .card_media {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  background: var(--c-cream-deep);
}
.product-card .card_media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.product-card:hover .card_media img { transform: scale(1.05); }
.product-card_body {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 1.8vw, 24px);
  flex: 1;
}
.product-card_title {
  font-family: var(--ff-display);
  font-size: clamp(1.2rem, .7vw + 1rem, 1.45rem);
  font-weight: 500; line-height: 1.2; letter-spacing: -.022em;
  color: var(--c-forest);
}
.product-card_text {
  font-size: .88rem; line-height: 1.55;
  color: var(--c-ink-mute);
  margin: 0;
}
.product-card_foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: auto; padding-top: 16px;
}
.product-card_price {
  font-size: 1.05rem; font-weight: 500;
  color: var(--c-forest);
  white-space: nowrap;
}

/* --- Jak to funguje --- */
.steps_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  list-style: none; padding: 0; margin: 0;
  counter-reset: step;
}
.step {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
}
.step_num {
  font-family: var(--ff-accent); font-style: italic;
  font-size: 1.1rem; color: var(--c-coral);
}
.step_title {
  font-family: var(--ff-display);
  font-size: clamp(1.2rem, .7vw + 1rem, 1.5rem);
  font-weight: 500; line-height: 1.2; letter-spacing: -.022em;
  color: var(--c-forest);
}
.step_text { font-size: .92rem; line-height: 1.6; color: var(--c-ink-mute); margin: 0; max-width: 34ch; }

/* --- Doručení a platba --- */
.delivery_panel {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 3.4vw, 64px);
  align-items: center;
  background: var(--c-cream-soft);
  border-radius: clamp(var(--r-lg), 2.6vw, var(--r-2xl));
  padding: clamp(28px, 3.4vw, 60px);
  box-shadow: var(--sh-soft);
  position: relative;
  overflow: hidden;
}
.delivery_panel::after {
  content: "";
  position: absolute;
  bottom: -70px; left: -60px;
  width: 260px; height: 260px;
  background: url('images/kytka_pattern.svg') center/contain no-repeat;
  opacity: .4;
  transform: rotate(24deg);
  pointer-events: none;
}
.delivery_content { display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; }
.delivery_meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin: 6px 0 0;
}
.delivery_meta dt {
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-coral); font-weight: 500; margin-bottom: 5px;
}
.delivery_meta dd { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--c-forest); }
.delivery_visual {
  margin: 0; position: relative; z-index: 1;
  border-radius: clamp(var(--r-md), 2vw, var(--r-xl));
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--c-cream-deep);
  box-shadow: var(--sh-med);
}
.delivery_visual img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1000px) { .product_grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .steps_grid { grid-template-columns: 1fr; }
  .delivery_panel { grid-template-columns: 1fr; }
  .delivery_visual { max-width: 420px; }
}
@media (max-width: 600px) {
  .product_grid { grid-template-columns: 1fr; }
  .delivery_meta { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SVATEBNÍ VÝZDOBA — layout dle Figmy (node 1:1148)
   ========================================================================== */
/* --- Hero: text vlevo, dvě překryté fotky vpravo --- */
.wedhero { position: relative; overflow: clip; padding-bottom: 0 !important; }
.wedhero::before {
  content: "";
  position: absolute;
  left: 24%; top: 62%;
  width: clamp(320px, 32vw, 610px); aspect-ratio: 1/1;
  background: url('images/kytka_pattern.svg') center/contain no-repeat;
  opacity: .45; pointer-events: none; z-index: 0;
}
.wedhero > * { position: relative; z-index: 1; }
.wedhero_grid {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 80px);
  align-items: start;
}
.wedhero_content { display: flex; flex-direction: column; }
/* Figma: perex je úzký (360 z 1320) a sedí 90px pod nadpisem */
.wedhero_lede { max-width: 360px; margin-top: clamp(20px, 2.4vw, 46px); }
.wedhero_content .button-row { margin-top: clamp(20px, 1.9vw, 36px); }

.wedhero_visual { position: relative; aspect-ratio: 780 / 600; }
.wedhero_visual figure { position: absolute; margin: 0; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh-med); }
.wedhero_visual img { width: 100%; height: 100%; object-fit: cover; }
/* fotka A 510x532 na (839,163), fotka B 364x441 na (1255,322) — vůči rámu 780x600 */
.wedhero_visual figure:first-child { left: 0; top: 0; width: 65.4%; aspect-ratio: 510 / 532; }
.wedhero_visual figure:last-child  { right: 0; top: 26.5%; width: 46.7%; aspect-ratio: 364 / 441; }

/* --- Běžící pás kategorií --- */
.wedticker {
  overflow: hidden;
  padding-block: 0 !important;
  margin-block: clamp(20px, 1.6vw, 30px);
  /* A3: Figma (1:1163) linky nema - drzi to pas vzdusnejsi */
}
/* Nekonečný pás: 6 shodných kopií, posun přesně o polovinu (3 kopie).
   Kopie nesmí mít mezeru navíc mezi sebou (jinak posun nesedí na násobek
   šířky kopie a vznikne trhnutí) — odstup nese padding-right každé kopie. */
.wedticker_track {
  display: flex; width: max-content;
  padding-block: 14px;
  animation: wedticker 60s linear infinite;
}
.wedticker_track > span {
  display: inline-flex; align-items: center; gap: 28px;
  padding-right: 28px;
  font-size: .95rem; color: var(--c-ink-mute);
  white-space: nowrap;
}
.wedticker_track b {
  font-weight: 400; color: var(--c-coral);
  /* hvězdička se kreslí u horního dotahu — opticky ji srovnat na střed řádku */
  line-height: 1;
  transform: translateY(.22em);
}
@keyframes wedticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wedticker_track { animation: none; } }

/* --- Panel služby --- */
.wedpanel {
  position: relative;
  background: var(--c-cream-soft);
  border-radius: clamp(var(--r-lg), 2.4vw, var(--r-2xl));
  padding: clamp(28px, 4vw, 69px) clamp(20px, 4vw, 70px) clamp(28px, 3.6vw, 60px);
  overflow: hidden;
  box-shadow: var(--sh-soft);
}
/* flex musí být na kontejneru, kde panely reálně jsou — sekce má jediné dítě .padding-global */
/* --- A2: dekorativni kvetiny na pozadi panelu (Figma 1:1206, 1:1212) ---
   Panel ma overflow:hidden, takze dekorace je jeho sourozencem v .wedpanel-slot
   a panel ji svym pozadim prekryje - v navrhu je videt jen cast v okraji.
   Rozmery a odsazeni jsou z Figmy /1920, aby to skalovalo se sirkou okna. */
.section_wedpanels { position: relative; overflow-x: clip; overflow-y: visible; }
.wedpanel-slot { position: relative; }
.wedpanel-slot > .wedpanel { z-index: 1; }
.wedpanel_decor {
  position: absolute;
  aspect-ratio: 1 / 1;
  background: url('images/kytka_pattern.svg') center/contain no-repeat;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}
/* 1:1206 - 767x766 px, presah 670 px za pravy okraj panelu, 22.9 % vysky */
.wedpanel_decor--right {
  width: clamp(300px, 39.95vw, 767px);
  right: clamp(-670px, -34.88vw, -262px);
  top: 23.7%;   /* Figma: 301 px od horní hrany panelu */
}
/* 1:1212 - 625x627 px, presah 335 px pred levy okraj panelu, 40.1 % vysky */
.wedpanel_decor--left {
  width: clamp(244px, 32.53vw, 625px);
  left: clamp(-335px, -17.45vw, -131px);
  top: 38.2%;   /* Figma: 544 px od horní hrany panelu */
}
/* Pod ~1500 px je okraj užší nez 100 px a z květiny by zbyl jen proužek */
@media (max-width: 1499px) { .wedpanel_decor { display: none; } }

.section_wedpanels .container-large {
  display: flex; flex-direction: column;
  gap: clamp(16px, 1.4vw, 24px);   /* Figma: 24px */
}
.wedpanel_head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  margin-bottom: clamp(24px, 3.7vw, 71px);   /* Figma: mozaika začíná 71px pod textem */
}
.wedpanel_title {
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 2.4vw + .6rem, 2.8rem);
  line-height: 1.12; letter-spacing: -.025em; font-weight: 500;
  color: var(--c-forest);
}
.wedpanel_title em { font-family: var(--ff-accent); font-style: italic; color: var(--c-coral); font-weight: 400; }
.wedpanel_lede { margin-top: 18px; max-width: 62ch; color: var(--c-ink-mute); line-height: 1.6; }
.wedpanel_head .button { justify-self: end; white-space: nowrap; }

/* mozaika: tři řady s poměry sloupců dle Figmy */
.wedmosaic { display: flex; flex-direction: column; gap: 16px; }
/* grid-template-rows: 100% je nutné — bez něj si obrázky protlačí vlastní
   výšku a aspect-ratio řady se neuplatní */
.wedmosaic_row { display: grid; gap: 16px; grid-template-rows: 100%; min-height: 0; }
.wedmosaic_row--a { grid-template-columns: 671fr 487fr; aspect-ratio: 1174 / 548; }
.wedmosaic_row--b { grid-template-columns: 284fr 400fr 458fr; aspect-ratio: 1174 / 330; }
.wedmosaic_row--c { grid-template-columns: 458fr 400fr 284fr; aspect-ratio: 1174 / 197; }
.wedmosaic figure {
  margin: 0; overflow: hidden; border-radius: var(--r-md);
  background: var(--c-cream-deep);
  height: 100%; min-height: 0; min-width: 0;
}
.wedmosaic img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.3s var(--ease-out);
}
.wedmosaic figure:hover img { transform: scale(1.05); }

/* prolnutí spodku panelu + tlačítko (panely 1 a 4) */
.wedpanel--more { padding-bottom: 0; }
.wedpanel_fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 216px;
  display: grid; place-items: center;
  background: linear-gradient(to bottom, rgba(247,237,220,0) 0%, var(--c-cream-soft) 62%);
  pointer-events: none;
}
.wedpanel_fade .button { pointer-events: auto; }
/* tlačítko je v HTML i u panelů, kde ho potřebuje jen telefon (mřížka 2 × 2) */
@media (min-width: 601px) {
  .wedpanel:not(.wedpanel--more) .wedpanel_fade { display: none; }
}

/* fotka v mozaice je tlačítko, které otevře galerii */
.wedmosaic_open {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none;
  cursor: zoom-in;
}
.wedmosaic_open:focus-visible { outline: 2px solid var(--c-coral); outline-offset: -4px; }

/* --- Galerie přes celou obrazovku (<dialog class="lightbox"> v main.js) --- */
.lightbox {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: 0;
  /* místo nahoře pro počítadlo, dole pro pás náhledů, po stranách pro šipky */
  padding: 72px clamp(12px, 7vw, 104px) 124px;
  background: transparent;
  color: var(--c-cream-soft);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(31, 42, 32, .94); }
.lightbox_figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; }
.lightbox_img {
  display: block;
  /* bez procent: rám se řídí šířkou fotky, takže % by se počítalo dokola a rám
     u fotek omezených výškou vyšel širší než fotka (logo pak přesahovalo) */
  max-width: min(100vw - 2 * clamp(12px, 7vw, 104px), 1100px);   /* minus boční padding dialogu */
  max-height: calc(100dvh - 196px - 40px);   /* padding dialogu + popisek */
  width: auto; height: auto;
  object-fit: contain;
}
/* rám má přesně rozměr fotky — nese zaoblení a logo */
.lightbox_frame { position: relative; display: block; overflow: hidden; border-radius: var(--r-md); }
/* logo jednou barvou: logo.svg jako maska, barvu dává background */
.lightbox_logo {
  position: absolute; right: clamp(12px, 3.5%, 28px); bottom: clamp(10px, 3%, 24px);
  width: clamp(88px, 24%, 190px); aspect-ratio: 293 / 47;
  background: var(--c-cream-soft);
  -webkit-mask: url('images/logo.svg') center / contain no-repeat;
          mask: url('images/logo.svg') center / contain no-repeat;
  pointer-events: none;
}
/* na světlém pozadí pod písmeny tmavé logo (tón měří main.js) */
.lightbox[data-tone="light"] .lightbox_logo { background: var(--c-forest); opacity: .85; }
.lightbox_caption { font-size: .92rem; color: var(--c-cream); text-align: center; max-width: 60ch; }
.lightbox_count {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: .85rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: var(--c-cream);
}
.lightbox_btn {
  position: absolute;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c-cream-soft);
  background: rgba(247, 237, 220, .10);
  border: 1px solid rgba(247, 237, 220, .28);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out);
}
.lightbox_btn:hover { background: rgba(247, 237, 220, .22); }
.lightbox_btn:focus-visible { outline: 2px solid var(--c-cream-soft); outline-offset: 3px; }
.lightbox_close { top: 14px; right: 14px; }
.lightbox_prev, .lightbox_next { top: 50%; transform: translateY(-50%); }
.lightbox_prev { left: 14px; }
.lightbox_next { right: 14px; }
/* pás náhledů dole — klik skočí na fotku, aktuální je zvýrazněná */
.lightbox_strip {
  position: absolute; left: 0; right: 0; bottom: 16px;
  display: flex; gap: 8px; justify-content: safe center;
  padding: 4px clamp(12px, 4vw, 40px);
  overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.lightbox_strip::-webkit-scrollbar { display: none; }
.lightbox_thumb {
  flex: none; width: 64px; height: 64px; padding: 0;
  border: 2px solid transparent; border-radius: 12px; overflow: hidden;
  background: rgba(247, 237, 220, .08);
  opacity: .55; cursor: pointer;
  transition: opacity var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.lightbox_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox_thumb:hover { opacity: .85; }
.lightbox_thumb[aria-current] { opacity: 1; border-color: var(--c-cream-soft); }
.lightbox_thumb:focus-visible { outline: 2px solid var(--c-cream-soft); outline-offset: 2px; }
/* jedna fotka: není kam listovat */
.lightbox.is-single .lightbox_prev,
.lightbox.is-single .lightbox_next,
.lightbox.is-single .lightbox_strip { display: none; }
/* telefon: šipky by zakrývaly fotku — listuje se tažením a klepnutím na náhled */
@media (max-width: 600px) {
  .lightbox_prev, .lightbox_next { display: none; }
  .lightbox_thumb { width: 56px; height: 56px; }
}
/* stránka pod otevřenou galerií se nescrolluje */
html:has(.lightbox[open]) { overflow: hidden; }

/* --- Dále nabízíme --- */
.section_wedmore { text-align: center; }
.wedmore_title { margin-bottom: clamp(28px, 3.4vw, 52px); }
.wedmore_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 313.5px));
  gap: 22px;
  justify-content: center;
  text-align: left;
}

/* Tablet si nechává desktopové rozvržení podstránky (dva sloupce v hero, hlavička
   panelu s tlačítkem vpravo, mozaika v poměrech z Figmy, 3 karty v řadě) — dřívější
   úpravy pro tablet dělaly z první fotky mozaiky obří samostatný obrázek a nechávaly
   třetí kartu „Dále nabízíme" osamocenou. */
@media (max-width: 900px) {
  /* sloupec s textem má na desktopu až 480 px; na tabletu by na fotky zbylo ~190 px */
  .wedhero_grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .wedhero_grid { grid-template-columns: 1fr; }
  .wedhero_content { text-align: center; }
  .wedhero_lede { margin-inline: auto; }
  .wedhero_content .button-row { justify-content: center; }
  .wedpanel_head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .wedpanel_lede { margin-inline: auto; }
  /* mozaika: sloupce jako na desktopu, jen vyšší řady — fotky zůstanou malé
     a přehledné místo obřích obrázků pod sebou */
  /* hlavička panelu: desktopové „tlačítko vpravo" by přebilo centrování */
  .wedpanel_head .button { justify-self: center; }
  /* Mozaika: mřížka 2 × 2 čtvercových fotek (~160 px). Tři vedle sebe měly
     73–175 px. Řady se rozpustí (display: contents), ukážou se první čtyři
     fotky v pořadí z administrace, zbytek je v galerii. */
  .wedmosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .wedmosaic_row { display: contents; }
  .wedmosaic figure { height: auto; aspect-ratio: 1 / 1; }
  .wedmosaic_row--b figure:nth-child(3), .wedmosaic_row.wedmosaic_row--c { display: none; }
  /* na malých fotkách by prolnutí jen rozmazalo spodní řadu — tlačítko pod mřížkou */
  .wedpanel, .wedpanel--more { padding-bottom: 24px; }
  .wedpanel .wedpanel_fade {
    display: flex; justify-content: center;
    position: static; height: auto; margin-top: 16px;
    background: none; pointer-events: auto;
  }
  /* 3 karty: dvě vedle sebe, třetí přes celou šířku — žádná osamocená */
  .wedmore_grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .wedmore_grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .wedmore_grid > :last-child:nth-child(odd) .card_media { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Stránka „Připravujeme" (e-shop, Zahrady)
   ========================================================================== */
.section_soon { position: relative; overflow: clip; }
.section_soon::before {
  content: "";
  position: absolute;
  left: -6%; bottom: -18%;
  width: clamp(300px, 30vw, 560px); aspect-ratio: 1/1;
  background: url('images/kytka_pattern.svg') center/contain no-repeat;
  opacity: .4; pointer-events: none; z-index: 0;
  transform: rotate(-12deg);
}
.section_soon > * { position: relative; z-index: 1; }

.soon_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 80px);
  align-items: center;
  min-height: 56vh;
}
.soon_content { display: flex; flex-direction: column; align-items: flex-start; }

.soon_label {
  margin-top: 24px;
  font-size: .75rem; line-height: 1.55;     /* min. 12px */
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-coral); font-weight: 500;
}
.soon_title {
  font-family: var(--ff-display);
  font-size: clamp(2.6rem, 4.4vw + .3rem, 4.6rem);
  line-height: 1.02; letter-spacing: -.03em; font-weight: 500;
  color: var(--c-forest);
  margin-top: 10px;
}
.soon_lede { margin-top: 20px; max-width: 44ch; }

.soon_list {
  margin: 26px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.soon_list li {
  position: relative;
  padding-left: 26px;
  font-size: .92rem; line-height: 1.55;
  color: var(--c-ink-mute);
}
/* odrážka jako drobný korálový puntík na optické ose textu */
.soon_list li::before {
  content: "";
  position: absolute; left: 6px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-coral);
}
.soon_content .button-row { margin-top: clamp(24px, 2.4vw, 38px); }

/* --- vizuál s rotujícím razítkem --- */
.soon_visual {
  position: relative; margin: 0;
  border-radius: clamp(var(--r-lg), 2.4vw, var(--r-2xl));
  overflow: visible;
  aspect-ratio: 4 / 3.2;
}
.soon_visual img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit;
  box-shadow: var(--sh-med);
}
.soon_stamp {
  position: absolute;
  left: clamp(-26px, -2vw, -16px); bottom: clamp(-26px, -2vw, -16px);
  width: clamp(104px, 10vw, 148px); height: clamp(104px, 10vw, 148px);
  display: grid; place-items: center;
  background: var(--c-cream-soft);
  border-radius: 50%;
  box-shadow: var(--sh-med);
  color: var(--c-forest);
}
.soon_stamp-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: spin 24s linear infinite;
}
.soon_stamp-core { position: relative; display: grid; place-items: center; width: 46%; height: 46%; }
@media (prefers-reduced-motion: reduce) { .soon_stamp-ring { animation: none; } }

/* tablet drží dva sloupce jako desktop, jen bez desktopové min. výšky */
@media (max-width: 900px) {
  .soon_grid { min-height: 0; }
}
@media (max-width: 600px) {
  .soon_grid { grid-template-columns: 1fr; gap: 32px; }
  .soon_visual { order: -1; aspect-ratio: 4/3; max-width: 520px; }
  /* na úzkém displeji nesmí razítko dosedat na okraj obrazovky */
  .soon_stamp { left: 10px; bottom: -14px; }
  /* úvod na střed jako ostatní sekce na telefonu; seznam zůstává zarovnaný
     vlevo, jen jako blok uprostřed — vystředěné odrážky se špatně čtou */
  .soon_content { align-items: center; text-align: center; }
  .soon_lede { max-width: 46ch; }
  .soon_list { text-align: left; }
  .soon_content .button-row { justify-content: center; }
}

/* ==========================================================================
   Animation initial states — only hide when JS is loaded
   ========================================================================== */
html.js-loaded [data-anim="fade"]   { opacity: 0; transform: translateY(20px); }
html.js-loaded [data-stagger] > *   { opacity: 0; transform: translateY(28px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .services_grid { grid-template-columns: repeat(2, 1fr); }
  .footer_top { grid-template-columns: 1fr 1fr; }
  .social_grid-images { grid-template-columns: repeat(4, 1fr); }
  .social_grid-images > :nth-child(5) { display: none; }
}
/* --------------------------------------------------------------------------
   Tablet i telefon (do 900 px): navigace v burgeru
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .navbar_menu { display: none; }
  .navbar_burger { display: flex; }
  /* Otevřené menu jako zaoblený panel pod hlavičkou. Tablet: karta pod burgerem. */
  .navbar_menu.is-open {
    display: flex; flex-direction: column; gap: 0;
    /* základní .navbar_menu má justify-self:center (desktop) — u absolutního prvku
       v mřížce by panel smrsklo na šířku obsahu, i když má nastavené oba okraje */
    justify-self: stretch;
    position: absolute; top: calc(100% + 8px);
    right: var(--padding-global);
    width: 320px;
    padding: 8px 24px;
    background: var(--c-cream-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-med);
  }
  /* položky na plnou šířku panelu a aspoň 44px vysoké kvůli dotyku */
  .navbar_menu.is-open > a,
  .navbar_menu.is-open .navbar_item { padding-block: 4px; }
  .navbar_menu.is-open .navbar_link { width: 100%; padding: 10px 0; font-size: 1rem; }
  .navbar_menu.is-open > * + * { border-top: 1px solid var(--c-line); }

  /* Tablet drží dvousloupcové rozvržení desktopu, zarovnané vlevo — jen hustší. */
  /* tablet i telefon: „Rodinné květinářství / a zahradnictví Valašské Meziříčí" */
  .hero_br { display: inline; }
  .hero_content .eyebrow { line-height: 1.3; }
  /* desktopová min. výška (72vh) nechávala pod tlačítkem ~230 px prázdna */
  .hero_grid { min-height: 0; }
  .hero_visual { min-height: 440px; }
  /* razítko nesmí přečuhovat přes okraj koláže do sloupce s textem */
  .story_stamp { left: auto; right: 0; }
  /* O nás: vedle koláže jen úvod (je zhruba stejně vysoký), citace pod oběma
     sloupci přes celou šířku — koláž dřív visela uprostřed s ~400 px prázdna */
  .story_visual { grid-row: auto; }
  .story_grid > .story_content { align-self: center; }
  .story_grid > .quote { grid-column: 1 / -1; justify-self: center; max-width: 34em; margin-top: clamp(48px, 7vw, 64px); }
  /* prodejny vedle sebe, poznámka nad nimi přes celou šířku */
  .locations_grid { grid-template-columns: 1fr 1fr; }
  .locations_note { grid-column: 1 / -1; order: -1; justify-self: start; text-align: left; max-width: 46ch; }
  .social_grid-images { grid-template-columns: repeat(3, 1fr); }
  .social_grid-images > :nth-child(n+4) { display: none; }

  /* Jednotný rytmus sekcí = --section-pad-y (tablet 72, telefon 64). Výjimky níž
     jsou doladěné podle Figmy pro 1920 px a na malé obrazovky se přenášely
     beze změny: za galerií a za e-shopem vycházelo ~100 px, jinde 64–72. */
  .section_story { padding-bottom: var(--section-pad-y) !important; }
  .section_gallery { padding-top: 0 !important; padding-bottom: var(--section-pad-y) !important; }
  .section_gallery + section { padding-top: 0 !important; scroll-margin-top: 0; }
  .section_eshop-cta { padding-bottom: var(--section-pad-y) !important; }
}

/* --------------------------------------------------------------------------
   Telefon (do 600 px): jeden sloupec, úvody sekcí jednotně na střed,
   obsah karet vlevo, menší fotky
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root { --section-pad-y: 64px; }
  .navbar_actions .button { display: none; }
  /* panel menu přes celou šířku, se stejným odsazením od krajů jako logo a burger */
  .navbar_menu.is-open { left: var(--padding-global); width: auto; }

  /* HERO: návěs → nadpis → text → tlačítko → kytice ze strany.
     Tlačítko musí být vidět na první obrazovce (i iPhone SE). display:contents
     rozpustí obal textu, takže jeho části i kytice jsou sourozenci v jedné mřížce. */
  /* navigace je ~84 px vysoká; 104 px nahoře stačí */
  .main-wrapper > .section_hero:first-child { padding-top: 104px; }
  .hero_grid { grid-template-columns: 1fr; gap: 0; min-height: 0; justify-items: center; text-align: center; }
  .hero_content { display: contents; }
  /* obal nesl z-index nad vzorem v pozadí — teď ho musí nést každá část sama */
  .hero_content > * { position: relative; z-index: 2; }
  .hero_content .eyebrow { order: 1; }
  .hero_content .heading-display { order: 2; margin-top: 14px; }
  .hero_content .text-style-lead { order: 3; margin-top: 16px; }
  .hero_content .button-row { order: 4; justify-content: center; margin-top: 20px; }
  .hero_visual { order: 5; justify-self: stretch; width: 100%; min-height: clamp(280px, 80vw, 440px); max-width: 100%; }
  .hero_handimage-wrap { right: -14%; width: 86%; max-width: 440px; top: 50%; }
  /* odznak vyčníval z rámu nahoru a zajížděl pod tlačítko Nabízíme */
  .hero_visual { margin-top: 32px; }
  /* na telefonu jsou vidět jen hlavy květů a OLED displeje barvy ještě zesílí —
     jemně ztlumeno, aby kytice působila klidně jako na desktopu */
  .hero_handimage { filter: drop-shadow(0 30px 50px rgba(47,59,47,.10)) saturate(.85); }
  /* vzor v pozadí začínal pod pruhem navigace a „zakusoval" se do něj */
  .hero_pattern { width: 110%; left: -45%; top: 150px; }

  /* SLUŽBY: dva sloupce — čtyři karty přes celou šířku zabíraly ~2000 px scrollu.
     Štítek na fotce opakoval nadpis pod ní, na malé kartě jen překážel. */
  .services_grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card_chip { display: none; }
  .card_body { padding: 14px 14px 16px; gap: 8px; }
  .card_title { font-size: 1.05rem; }
  .card_text { font-size: .8rem; }
  .card_arrow { width: 32px; height: 32px; }

  /* O NÁS */
  .story_grid { grid-template-columns: 1fr; }
  .story_visual { max-width: 300px; width: 100%; justify-self: center; }
  /* parallax je tu vypnutý (main.js), takže fotky nepotřebují rezervu výšky
     a nemají uříznutý vršek */
  .story_image img { height: 100%; top: 0; }
  /* květina v pozadí kolidovala s koláží */
  .section_story::before { display: none; }
  .story_content { align-items: center; text-align: center; }
  .story_content .button-row { justify-content: center; }
  .story_grid > .quote { margin-top: 40px; }
  .story_stamp { --stamp-size: 92px; }

  /* GALERIE: všechny 4 fotky v řadě, pás širší než okno a nižší. Přesah 35 %
     na každou stranu je víc než posun parallaxu (max 10vw). */
  .gallery_track { width: 170%; margin-inline-start: -35%; }
  .gallery_item { height: clamp(150px, 42vw, 300px); }

  /* PRODEJNY */
  .section_locations .section_header { align-items: center; text-align: center; margin-inline: auto; }
  .locations_grid { grid-template-columns: 1fr; }
  .locations_note { justify-self: center; text-align: center; }

  /* E-SHOP */
  .eshop-cta { grid-template-columns: 1fr; }
  .eshop-cta_visual { min-height: 220px; }
  .eshop-cta_content { align-items: center; text-align: center; }

  /* SLEDUJTE NÁS */
  .social_grid { grid-template-columns: 1fr; gap: 24px; }
  .social_content { align-items: center; text-align: center; }
  .social_buttons { align-items: center; }
  /* na desktopu pás fotek utíká za pravý okraj; u vystředěné sekce by byl nakřivo */
  .social_grid-images { margin-right: 0; }

  /* PATIČKA: na střed jako zbytek stránky */
  .footer_top { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; text-align: center; justify-items: center; }
  .footer_brand .navbar_logo { justify-content: center; }
  .footer_links { align-items: center; }
  .footer_payments, .footer_social { justify-content: center; }
  .footer_bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 10px; }
  .footer_bottom div { justify-content: center; }
  .footer_credit { justify-self: center; }
}
/* tablet: karty služeb jsou ve dvou sloupcích — fotka 3:4 by měla přes 450 px */
@media (min-width: 601px) and (max-width: 1100px) {
  .service-card .card_media { aspect-ratio: 5 / 4; }
}
/* telefon a tablet: korálové tlačítko má na desktopu podle Figmy větší velikost;
   vedle ostatních tlačítek (hero, panely, Připravujeme) to působilo nesourodě —
   tady jsou všechna stejná */
@media (max-width: 900px) {
  .button.is-coral { font-size: .82rem; padding: 12px 21px 13px; gap: 21px; }
}
/* na nejužších telefonech se popis do půlky šířky nevejde čitelně — stačí fotka
   a název (karta přes celou šířku ho ukazuje dál) */
@media (max-width: 480px) {
  .services_grid .card_text,
  .wedmore_grid > :not(:last-child:nth-child(odd)) .card_text { display: none; }
}

/* --------------------------------------------------------------------------
   Dotyková zařízení: cíle aspoň 44 px (Apple HIG / WCAG 2.5.5). Jen pro
   pointer:coarse, takže desktop s myší zůstává podle Figmy.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .navbar_logo { padding-block: 6px; }
  .footer_links { gap: 0; }
  .footer_links a { display: inline-block; padding-block: 11px; }
  .footer_bottom a { display: inline-block; padding-block: 12px; }
  .footer_social-btn { width: 44px; height: 44px; }
  .social_buttons .button { min-height: 44px; }
  /* telefon a e-mail na kartě prodejny jsou pod sebou — každý vlastní 44px řádek */
  .location-card_meta dd a { display: inline-block; padding-block: 13px; }
  .categoryhero_crumbs a { display: inline-block; padding-block: 13px; margin-block: -13px; }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-anim], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Poptávka (kategorie) — sem vedou CTA tlačítka; kontakt bez odchodu ze stránky
   ========================================================================== */
.poptavka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 96px);
  align-items: center;
}
.poptavka_content .text-style-lead { margin-top: var(--s-5); max-width: 44ch; }
.poptavka_list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.poptavka_item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--s-5);
  padding: clamp(18px, 1.6vw, 26px) clamp(20px, 2vw, 32px);
  background: var(--c-cream-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-soft);
  color: var(--c-forest);
  text-decoration: none;
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.poptavka_item:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); }
.poptavka_item:focus-visible { outline: 2px solid var(--c-coral); outline-offset: 3px; }
.poptavka_item .button_icon { grid-column: 2; grid-row: 1 / span 3; width: 20px; height: 20px; }
.poptavka_term {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-coral);
}
.poptavka_value { font-size: clamp(1.05rem, 1.3vw, 1.35rem); line-height: 1.35; overflow-wrap: anywhere; }
.poptavka_note { font-size: .88rem; line-height: 1.5; color: var(--c-ink-light); }
@media (max-width: 600px) {
  .poptavka { grid-template-columns: 1fr; }
  .poptavka_content { text-align: center; }
  .poptavka_content .text-style-lead { margin-inline: auto; }
}