/* ==========================================================================
   Luvini Fruit — jednostránková firemní prezentace
   Mobile-first, CSS Grid/Flexbox, žádný framework.
   ========================================================================== */

:root {
  --color-yellow: #FFE000;
  --color-cream: #FDF9CD;
  --color-white: #FFFFFF;
  --color-dark: #1E1E1E;
  --color-text: #1E1E1E;
  --color-text-muted: #4A4A4A;
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-border: rgba(30, 30, 30, 0.12);
  --color-accent: #1E1E1E;

  --gradient-primary: linear-gradient(135deg, #FFE000 0%, #FDF9CD 100%);
  --gradient-soft: linear-gradient(180deg, #FFFFFF 0%, #FDF9CD 100%);
  --gradient-dark: linear-gradient(135deg, #1E1E1E 0%, #4A4A4A 100%);

  /* Yellow fails contrast as text on white/cream, so text/border accents
     on light backgrounds use the dark tone; yellow is reserved for fills
     and for accents on dark (.section-olive, .site-footer, mobile nav). */
  --color-accent-text: #1E1E1E;

  --font-heading: "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* 8px spacing scale */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 5.5rem;   /* 88px */

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-soft: 0 12px 32px -18px rgba(30, 30, 30, 0.22);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container-max: 1360px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-background);
  line-height: 1.65;
  font-size: 1.0625rem; /* ~17px */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  color: var(--color-text);
  text-wrap: balance;
}
/* h1/h2 carry the visual weight; h3/h4 stay one step lighter so card and
   step titles read as airy sub-hierarchy rather than competing headlines. */
h1, h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }

p { max-width: 68ch; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-dark);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  z-index: 999;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- Icons ---------- */
.icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-dark);
  flex-shrink: 0;
}
.icon-lg { width: 2.75rem; height: 2.75rem; }

/* ---------- Typography scale ---------- */
h1 { font-size: clamp(1.7rem, 2vw + 0.9rem, 2.75rem); margin-bottom: var(--space-3); }
h2 { font-size: clamp(1.75rem, 1.8vw + 1rem, 2.75rem); margin-bottom: var(--space-3); }
h3 { font-size: clamp(1.3125rem, 0.8vw + 1rem, 1.625rem); margin-bottom: var(--space-2); }

.kicker {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-2);
}
.kicker-light { color: var(--color-yellow); }

.body-text { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.body-text.lead { font-size: 1.125rem; max-width: 62ch; }
.body-text:last-of-type { margin-bottom: var(--space-4); }
.body-text.emphasis {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text);
}

blockquote.body-quote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-cream);
  border-left: 4px solid var(--color-yellow);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
}
blockquote.body-quote p { margin: 0; }

.center-text { text-align: center; margin-inline: auto; }
.center-cta { text-align: center; margin-top: var(--space-4); }

.heading-with-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.heading-with-cta > div { flex: 1 1 420px; }
.heading-with-cta > div :last-child { margin-bottom: 0; }
.heading-with-cta .btn { flex-shrink: 0; }

.title-light { color: var(--color-white); }
.title-light.body-text { color: rgba(255, 255, 255, 0.85); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  border: 1.5px solid transparent;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); background: var(--color-yellow); color: var(--color-dark); }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  border-color: var(--color-accent-text);
  color: var(--color-accent-text);
}
.btn-outline:hover { background: rgba(30, 30, 30, 0.06); }
.section-olive .btn-outline { border-color: var(--color-white); color: var(--color-white); }
.section-olive .btn-outline:hover { background: rgba(255, 255, 255, 0.12); }

.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-large { padding: 1.05rem 2rem; font-size: 1.0625rem; }
.btn-small { padding: 0.6rem 1.15rem; font-size: 0.9rem; min-height: 40px; }
.btn-full { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid rgba(30, 30, 30, 0.08);
  box-shadow: 0 12px 28px -22px rgba(30, 30, 30, 0.35);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  gap: var(--space-3);
}

.logo { display: inline-flex; align-items: center; }
.logo-img { height: 1.5rem; width: auto; }

.main-nav { display: flex; align-items: center; gap: 1.5rem; }
.main-nav ul { display: flex; gap: 0.25rem; }
.main-nav a:not(.btn) {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.main-nav a:not(.btn):hover,
.main-nav a:not(.btn):focus-visible {
  background: var(--color-cream);
  color: var(--color-dark);
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  margin-inline: auto;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--space-6); }
#sortiment, #dozravarna, #doprava, #kontakt { padding-bottom: var(--space-7); }
.section-sage { background: var(--color-cream); }
/* Solid (not gradient) so light text stays reliably >= 4.5:1 across the
   whole section — the gradient's pale-sage end is too light for that. */
.section-olive { background: var(--color-dark); }

/* ---------- Wave dividers ----------
   One wave per colour change, owned by the section that follows: it sits
   flush above that section's top edge (full-bleed, ignoring container
   padding) and is filled with that section's own background, so the
   boundary reads as a soft curve instead of a hard line. Decorative only. */
.wave-divider {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  line-height: 0;
  pointer-events: none;
}
.wave-divider svg { display: block; width: 100%; height: 48px; }
@media (min-width: 900px) { .wave-divider svg { height: 76px; } }
.wave-divider--sage path { fill: var(--color-cream); }
.wave-divider--white path { fill: var(--color-background); }
.wave-divider--olive path { fill: var(--color-dark); }

.section > .container,
.hero > .container,
.site-footer > .container { position: relative; z-index: 1; }

/* ---------- Hero ----------
   Beige base with soft yellow/green glows (not full-strength colour
   stops) so most of the bottom edge stays close to the beige base —
   a bottom that matched the next section's pale sage flat-on would
   erase the wave-divider seam below. */
.hero {
  position: relative;
  padding-block: var(--space-6) var(--space-7);
  background:
    radial-gradient(ellipse 60% 55% at 14% 18%, rgba(255, 224, 0, 0.35) 0%, transparent 70%),
    radial-gradient(ellipse 60% 55% at 88% 62%, rgba(253, 249, 205, 0.9) 0%, transparent 70%),
    var(--color-white);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

.hero-copy { max-width: 560px; }

.hero-lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin-bottom: var(--space-4);
}

.hero-media { position: relative; width: 100%; --blob: 44% 56% 61% 39% / 55% 42% 58% 45%; }
.hero-media img {
  border-radius: var(--blob);
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center top;
  box-shadow: var(--shadow-soft);
}

.trust-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: var(--space-4);
}
.trust-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-text);
}
.trust-list .icon {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0.3rem;
  box-sizing: content-box;
  color: var(--color-dark);
  background: var(--color-yellow);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- Reveal animation (opacity + small translate only) ----------
   Content is visible by default so it never depends on JavaScript running.
   Only once the early inline script has confirmed JS is active (html.js)
   does content start hidden, ready for the scroll observer to reveal it. */
.reveal-up { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: var(--d, 0s); }
html.js .reveal-up { opacity: 0; transform: translateY(18px); }
html.js .reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
}
.card .icon-lg { margin-bottom: var(--space-2); }
.card p { color: var(--color-text-muted); }

.sortiment-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-5);
}
.sortiment-note .icon { flex-shrink: 0; margin-top: 0.15rem; }
.sortiment-note .note-title { font-family: var(--font-heading); font-weight: 700; margin-bottom: 0.25rem; }
.sortiment-note p:last-child { color: var(--color-text-muted); margin-bottom: 0; }

/* Tiles sit in two independent-height columns (not the responsive
   1/2/4-column .grid or a plain CSS grid — a grid row would grow to fit
   its tallest cell and drag both columns down together) so the right
   column can be offset for a deliberately asymmetric, less boxy feel.
   `.tile-col` is inert (display:contents) below the split-grid
   breakpoint, so all four cards simply stack in reading order on mobile. */
.sortiment-tiles { display: flex; flex-direction: column; gap: var(--space-3); }
.tile-col { display: contents; }
.sortiment-tiles .card {
  padding: var(--space-3);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sortiment-tiles .card:hover {
  transform: translateY(-4px);
  border-color: var(--color-yellow);
}
/* Same soft circular badge language as .pill-card / .process-step-badge,
   so every "icon + label" pattern on the page reads as one system. */
.sortiment-tiles .icon-lg {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.55rem;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}
.sortiment-tiles h3 { font-size: 1.0625rem; margin-bottom: 0; }
.split-grid.sortiment-split { align-items: start; }
@media (min-width: 480px) {
  .sortiment-tiles { flex-direction: row; }
  .tile-col { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 0; }
}
@media (min-width: 900px) {
  /* Roughly lines the tile columns up with the "Sídlíme v Liberci" note
     rather than the heading above it, and staggers the right column
     lower still, for an asymmetric composition instead of a flat grid. */
  .sortiment-tiles { margin-top: 8rem; }
  .tile-col--offset { margin-top: 3rem; }
}

.pill-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-weight: 500;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pill-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-yellow);
}
.pill-card .icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--color-dark);
}


/* ---------- Split layout (dozrávárna / doprava / příběh / kontakt) ---------- */
.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-6);
}
.split-grid:last-child { margin-bottom: 0; }
.split-grid.reverse .doprava-media { order: -1; }

/* Organic blob frames: every media photo on the page (hero, dozrávárna,
   doprava, příběh) is clipped to an irregular blob via asymmetric
   border-radius (--blob), each with its own shape. Behind each one sits a
   thin hairline outline of the same blob, slightly offset and rotated, so
   it reads like a loose hand-drawn contour peeking out at the edges, plus
   a small yellow dot as a quiet brand accent. */
.dozravarna-media { --blob: 58% 42% 45% 55% / 42% 58% 40% 60%; }
.doprava-media { --blob: 42% 58% 65% 35% / 45% 55% 45% 55%; }
.pribeh-media { --blob: 50% 50% 38% 62% / 62% 42% 58% 38%; max-width: 75%; margin-inline: auto; }

.hero-media,
.dozravarna-media,
.doprava-media,
.pribeh-media { position: relative; isolation: isolate; }

.hero-media::before,
.dozravarna-media::before,
.doprava-media::before,
.pribeh-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3.5%;
  border: 1.5px solid rgba(30, 30, 30, 0.18);
  border-radius: var(--blob);
  transform: rotate(-4deg) translate(2%, 1.5%);
  pointer-events: none;
}
.hero-media::after,
.dozravarna-media::after,
.doprava-media::after,
.pribeh-media::after {
  content: "";
  position: absolute;
  top: 6%;
  right: 4%;
  width: clamp(14px, 2.2vw, 22px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-yellow);
  pointer-events: none;
}

.dozravarna-media img,
.doprava-media img,
.pribeh-media img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--blob);
  box-shadow: var(--shadow-soft);
}
.dozravarna-media img { aspect-ratio: 4 / 3; }
.doprava-media img { aspect-ratio: 3 / 2; }
.pribeh-media img { aspect-ratio: 3 / 4; }

/* ---------- Process steps (numbered timeline) ----------
   Mobile/tablet: a vertical timeline — badge + text side by side, a line
   threads down through the badges. Desktop (>=900px): the same steps lay
   out in a single row and the line turns horizontal. Both directions use
   the same trick: each item draws the line from its own badge centre out
   to its own edge (plus half the gap), so two neighbouring stubs always
   meet exactly in the middle of the gap — no measuring of text height or
   column width required, so it stays correct at any content length. */
.process-steps-title {
  text-align: center;
  font-size: 1.0625rem;
  color: var(--color-accent-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: var(--space-6);
  margin-bottom: var(--space-6);
}
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  counter-reset: step;
}
.process-steps li {
  position: relative;
  counter-increment: step;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
}
.process-steps li:not(:first-child)::before,
.process-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 2.25rem;
  width: 2px;
  background: var(--color-border);
  z-index: 0;
  transform: translateX(-50%);
}
.process-steps li:not(:first-child)::before { top: 0; height: 2.25rem; }
.process-steps li:not(:last-child)::after { top: 2.25rem; bottom: calc(-1 * var(--space-5)); }

.process-step-badge {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-soft);
}
.process-step-badge .icon { width: 1.75rem; height: 1.75rem; color: var(--color-dark); }
.process-step-badge::after {
  content: counter(step);
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  border: 2px solid var(--color-background);
}
.process-step-body { padding-top: 0.5rem; }
.process-steps h4 { font-size: 1.125rem; margin-bottom: 0.35rem; }
.process-steps .body-text { margin-bottom: 0; font-size: 0.9375rem; }

/* ---------- Region list ---------- */
.region-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.region-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-white);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  box-shadow: var(--shadow-soft);
}
.region-list .icon { width: 1.25rem; height: 1.25rem; }

/* ---------- CTA banner ---------- */
/* "žluto-zelený" gradient (Golden Beige -> Pale Sage) with dark text, kept
   safe across the whole span since both stops are light. */
.cta-banner { background: var(--gradient-primary); }
.cta-banner-inner { text-align: center; max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.cta-banner-inner .btn { margin-top: var(--space-2); }
.cta-note { font-size: 0.95rem; color: var(--color-text-muted); }

/* ---------- Contact ---------- */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}
.contact-details li { display: flex; align-items: center; gap: 0.6rem; color: var(--color-text-muted); }
.contact-details .icon { width: 1.25rem; height: 1.25rem; }
.contact-details a { color: var(--color-text); font-weight: 600; }
.contact-details a:hover { color: var(--color-accent-text); text-decoration: underline; }
.contact-details-name { font-family: var(--font-heading); font-weight: 700; color: var(--color-text); }
.contact-details-meta { font-size: 0.9375rem; padding-left: calc(1.25rem + 0.6rem); }

.contact-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
}
.form-row { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-3); }
.form-row label { font-weight: 600; font-size: 0.9rem; color: var(--color-text); }
.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
  resize: vertical;
  min-height: 44px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255, 224, 0, 0.55);
  outline: none;
}
/* Invalid state is shown by shape (thicker dashed border) and an icon +
   text message, not by a new off-palette colour — see field-error below. */
.form-row input[aria-invalid="true"],
.form-row select[aria-invalid="true"],
.form-row textarea[aria-invalid="true"] {
  border-color: var(--color-dark);
  border-width: 2px;
  border-style: dashed;
}

.field-error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  min-height: 1.1em;
}
.field-error:empty { display: none; }
.field-error:not(:empty)::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: var(--color-dark);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2 1 21h22L12 2zm0 6.5 6.5 11h-13L12 8.5zM11 11h2v5h-2zm0 6.5h2v2h-2z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2 1 21h22L12 2zm0 6.5 6.5 11h-13L12 8.5zM11 11h2v5h-2zm0 6.5h2v2h-2z"/></svg>') center / contain no-repeat;
}

.form-row-checkbox {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem;
}
.form-row-checkbox input { width: 20px; height: 20px; min-height: 20px; flex-shrink: 0; margin-top: 0.15rem; accent-color: var(--color-accent); }
.form-row-checkbox label { font-weight: 400; font-size: 0.875rem; color: var(--color-text-muted); flex: 1; }
.form-row-checkbox .field-error { width: 100%; }

.form-status { margin-top: var(--space-2); font-size: 0.9rem; min-height: 1.2em; font-weight: 500; }
.form-status.success { color: var(--color-dark); }
.form-status.error { color: var(--color-text); font-weight: 700; }

/* Honeypot: off-screen but present in the DOM (not display:none) so basic
   bots that fill every field still get caught */
.hp-field {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--color-dark); color: var(--color-white); padding-top: var(--space-6); }
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
}

.footer-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); }
}

.footer-col-brand .logo-img { height: 1.4rem; filter: brightness(0) invert(1); margin-bottom: var(--space-3); }
.footer-tagline { font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.7); max-width: 32ch; }

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.footer-links { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-links a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.footer-links a:hover { color: var(--color-yellow); text-decoration: underline; text-underline-offset: 2px; }

.footer-contact li { display: flex; align-items: flex-start; gap: 0.55rem; }
.footer-contact .icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: 0.15rem; color: var(--color-yellow); }
.footer-contact a { line-height: 1.4; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-copyright { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); margin: 0; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-legal-links a,
.footer-credit {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-legal-links a:hover,
.footer-credit:hover { color: var(--color-yellow); }

/* ==========================================================================
   Responsive breakpoints — mobile-first enhancements
   ========================================================================== */

@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  .split-grid { grid-template-columns: 1fr 1fr; }
  .split-grid.reverse { grid-template-columns: 0.9fr 1.1fr; }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  .process-steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
  .process-steps li { display: block; text-align: center; }
  .process-step-badge { margin: 0 auto var(--space-3); }
  .process-step-body { padding-top: 0; }
  .process-steps li:not(:first-child)::before,
  .process-steps li:not(:last-child)::after {
    top: 2.25rem;
    bottom: auto;
    height: 2px;
    width: calc(50% + var(--space-4) / 2);
    transform: none;
  }
  .process-steps li:not(:first-child)::before { left: auto; right: 50%; }
  .process-steps li:not(:last-child)::after { left: 50%; }
}

/* The full horizontal nav needs more room than the layout breakpoint above
   (7 links + logo + CTA) — switch to it later so links never wrap. */
@media (min-width: 1120px) {
  .main-nav {
    display: flex;
    position: static;
    inset: auto;
    width: auto; height: auto;
    background: none;
    flex-direction: row;
    padding: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .main-nav ul { flex-direction: row; }
  .main-nav a:not(.btn) { color: var(--color-text); font-size: 0.9rem; }
  .hamburger { display: none; }
  .nav-close { display: none; }
}

@media (max-width: 1119px) {
  /* Full-screen overlay rather than a narrow side drawer, with its own
     close button (rather than relying on the hamburger, which sits
     underneath this panel once open and would otherwise be unreachable). */
  .main-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    background: var(--color-dark);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
    z-index: 150;
  }
  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .main-nav ul { flex-direction: column; align-items: center; gap: var(--space-2); width: 100%; }
  .main-nav a:not(.btn) { display: block; text-align: center; color: var(--color-white); font-size: 1.25rem; padding: 0.75rem 1.1rem; }
  .main-nav a:not(.btn):hover,
  .main-nav a:not(.btn):focus-visible { background: rgba(255, 255, 255, 0.12); color: var(--color-yellow); }

  .nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 44px;
    height: 44px;
    color: var(--color-white);
  }
  .nav-close .icon { width: 1.5rem; height: 1.5rem; }
  .nav-close:hover,
  .nav-close:focus-visible { color: var(--color-yellow); }

  body.nav-open { overflow: hidden; }
}

/* Extra breathing room once there's room to spare — sections and the hero
   get noticeably airier on desktop without touching mobile density. */
@media (min-width: 1024px) {
  .section { padding-block: var(--space-7); }
  #sortiment, #dozravarna, #doprava, #kontakt { padding-bottom: calc(var(--space-7) + var(--space-3)); }
  .hero { padding-block: var(--space-7) calc(var(--space-7) + var(--space-2)); }
}

/* Large desktop / 4K */
@media (min-width: 1600px) {
  :root { --container-max: 1480px; }
  body { font-size: 1.125rem; }
}
@media (min-width: 2200px) {
  :root { --container-max: 1720px; }
  body { font-size: 1.2rem; }
}