/* ===== Design tokens ===== */
:root {
  --accent: #8F5A21;
  --accent-dark: #6E4419;
  --accent-tint: #F1E4D2;
  --ink: #201D19;
  --ink-soft: #58534B;
  --bg: #FFFFFF;
  --bg-alt: #FFFFFF;
  --white: #FFFFFF;
  --border: #E4DFD3;
  --field-bg: #F6F1E8;
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 2px 16px rgba(32, 29, 25, 0.07);
  --shadow-lg: 0 10px 32px rgba(32, 29, 25, 0.12);
  --nav-h-top: 92px;
  --nav-h-mid: 76px;
  --nav-h-slim: 64px;
  --nav-h: var(--nav-h-top);
}

/* ===== Reset ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  padding-top: var(--nav-h-top);
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-family: var(--font-heading); color: var(--ink); margin: 0 0 0.5em; line-height: 1.14; font-weight: 700; letter-spacing: -0.01em; }
h1, h2 { font-weight: 800; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: var(--font-body); cursor: pointer; }

.container { max-width: 1840px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 84px); }

section {
  padding: 112px 0;
  scroll-margin-top: calc(var(--nav-h-top) + 24px);
  box-sizing: border-box;
}
section > .container { width: 100%; }
section.alt { background: var(--bg-alt); }
.section-head { max-width: 640px; margin: 0 0 40px; }
.section-head p:not(.eyebrow) { color: var(--ink-soft); font-size: 1.06rem; }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn-accent {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 2px 10px rgba(143, 90, 33, 0.25);
}
.btn-accent:hover { background: var(--accent-dark); box-shadow: 0 6px 18px rgba(143, 90, 33, 0.32); transform: translateY(-1px); }
.btn-accent:active { transform: translateY(0); }
.btn-accent.btn-sent, .btn-accent.btn-sent:hover {
  background: #2a7d2e;
  box-shadow: 0 2px 10px rgba(42, 125, 46, 0.28);
  transform: none;
}
.btn-arrow { transition: transform 0.2s ease; flex-shrink: 0; }
.btn-accent:hover .btn-arrow { transform: translateX(3px); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ===== Header ===== */
/* position: fixed on purpose: a sticky element still reserves its own box in
   normal flow, so shrinking it on scroll would shift page content and hence
   scrollY, which re-triggers the scroll handler that resized it — a feedback
   loop. Fixed sits outside the flow so a height change here never moves the
   page. body's padding-top (a constant, the header's tallest size) reserves
   the space instead, so nothing is ever hidden underneath it. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(252, 251, 249, 0.97);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h-top);
  display: flex;
  align-items: center;
  transition: height 0.25s ease;
}
.site-header[data-state="down"] { height: var(--nav-h-slim); }
.site-header[data-state="up"] { height: var(--nav-h-mid); }

.site-header .container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.logo-link { justify-self: start; }
.logo-link img { height: 74px; width: auto; transition: height 0.25s ease; }
.site-header[data-state="down"] .logo-link img,
.site-header[data-state="up"] .logo-link img { height: 56px; }

.main-nav { justify-self: center; display: flex; align-items: center; gap: 30px; }
.main-nav a {
  font-family: var(--font-body);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.main-nav a:hover { color: var(--accent); }

.nav-item-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 50;
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
}
.nav-dropdown-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown-card a {
  padding: 10px 14px;
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-dropdown-card a:hover { background: var(--accent-tint); color: var(--accent); }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 20px; }
.header-actions .btn-accent { padding: 10px 20px; font-size: 0.88rem; }
.header-phone { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); font-size: 1rem; transition: color 0.15s ease; }
.header-phone:hover { color: var(--accent); }
.header-phone svg { flex-shrink: 0; color: var(--accent); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero (full-bleed photo) ===== */
/* position:relative + absolutely-positioned media/overlay layers, with the
   text content in a normal-flow container on top (z-index 2). padding:0
   overrides the generic `section` rule — the photo has to reach the section's
   own edges, not sit inset inside padding. */
.hero {
  position: relative;
  padding: 0;
  /* Always exactly fills the screen below the fixed header — no sliver of
     the next section can peek through on load, on any device. dvh (where
     supported) accounts for mobile browser chrome; the plain vh line above
     it is the fallback for browsers that don't understand dvh. */
  min-height: calc(100vh - var(--nav-h-top));
  min-height: calc(100dvh - var(--nav-h-top));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--white);
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--ink); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 75%; }
/* Gradient is near-transparent at the top (lets the photo read clearly) and
   dark at the bottom where the text sits, so white text stays legible
   regardless of what's directly behind it in the photo. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 18, 15, 0.1) 0%, rgba(20, 18, 15, 0.46) 58%, rgba(20, 18, 15, 0.95) 100%);
}
.hero .container { position: relative; z-index: 2; width: 100%; padding-top: 160px; padding-bottom: 72px; }
.hero-copy { max-width: 720px; margin-left: clamp(0px, 6vw, 96px); }
.hero h1 { color: var(--white); font-size: clamp(2.7rem, 4.8vw, 4rem); }
.hero-tagline {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E3B476;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  margin-bottom: 16px;
}
.hero p.lead { font-size: 1.18rem; max-width: 44ch; color: rgba(255, 255, 255, 0.92); }
.hero-ctas { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.btn-outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.12); color: var(--white); }
.hero .stats-strip .stat-num { color: var(--white); }
.hero .stats-strip .stat-label { color: rgba(255, 255, 255, 0.72); }

/* ===== CTA band (index) ===== */
/* Sole exception to the all-white background rule — a dark band gives the
   closing call-to-action weight and eases the transition into the dark
   footer directly below it. */
#cta-band { background: var(--ink); }
#cta-band h2 { color: var(--white); }
#cta-band .eyebrow { color: #E3B476; }
#cta-band .section-head p:not(.eyebrow) { color: rgba(255, 255, 255, 0.78); }

/* ===== Stats strip ===== */
.stats-strip { display: flex; gap: 48px; margin-top: 40px; flex-wrap: wrap; }
.stat-item { min-width: 120px; }
.stat-num { display: block; font-family: var(--font-heading); font-size: 2.1rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 6px; }
.stat-label { font-size: 0.88rem; color: var(--ink-soft); }

/* ===== Category tiles ("Co vyrábíme") ===== */
/* Landing here from the hero's "Naše práce" button should show the tiles
   themselves, not mostly heading — less top padding and a tighter section
   head than the generic section defaults. */
#nabidka { padding-top: 64px; scroll-margin-top: calc(var(--nav-h-top) - 70px); }
#nabidka .section-head { margin-bottom: 24px; }
.product-group { width: 100%; margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--border); }
.product-group:first-of-type { border-top: none; padding-top: 0; }
.product-group-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
}
.product-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 420px)); gap: 20px; }
.product-tile {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.product-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--accent); }
.product-tile-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--field-bg); }
.product-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.product-tile:hover .product-tile-img img { transform: scale(1.05); }
.product-tile-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  font-size: 0.96rem;
}
.product-tile-label svg { color: var(--accent); flex-shrink: 0; transition: transform 0.2s ease; }
.product-tile:hover .product-tile-label svg { transform: translateX(3px); }

.nabidka-fallback {
  width: 100%;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.nabidka-fallback p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }

/* ===== About page =====
   Spacing rhythm mirrors segajihlava.cz/o-nas 1:1: hero 96px/16px, body
   section 12px, 1fr 1fr grid at 24px, stat grid at 10px. Left-aligned
   stack (eyebrow → h1 → sub) with 6px gaps, no breadcrumb — same as SEGA. */
.about-wrap { width: 100%; max-width: 1480px; }
.about-hero { padding: 96px 0 16px; }
.about-hero .eyebrow { margin-bottom: 6px; }
.about-hero h1 { margin-bottom: 6px; }
.about-hero-sub { margin: 0; color: var(--ink-soft); font-size: 1.15rem; }

.about-body { padding: 12px 0 48px; }
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.about-story { display: flex; flex-direction: column; }
.about-story p { font-size: 1.22rem; line-height: 1.65; margin: 0 0 16px; }
.about-social { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.about-why-cta { margin-top: 24px; align-self: flex-start; }
.about-social-label { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.social-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--ink);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.social-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.social-btn-facebook { background: #1877F2; border-color: #1877F2; color: #fff; }
.social-btn-facebook:hover { background: #1465D8; border-color: #1465D8; color: #fff; }

.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.about-stat-card {
  background: var(--white);
  border-left: 3px solid var(--accent);
  padding: 16px 18px;
}
.about-stat-num { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 2.3rem; color: var(--ink); line-height: 1; margin-bottom: 8px; }
.about-stat-desc { font-size: 1.02rem; color: var(--ink-soft); line-height: 1.55; }

.about-why { padding: 90px 0 96px; scroll-margin-top: calc(var(--nav-h-top) + 24px); }
.about-why .eyebrow { margin-bottom: 20px; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.why-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
/* Short accent rule above the heading — the card's only ornament. */
.why-item h3 { margin-bottom: 8px; font-size: 1.08rem; padding-top: 14px; position: relative; }
.why-item h3::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.why-item p { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }

/* ===== Process steps ===== */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 8px; width: 100%; }
.process-step { position: relative; padding-top: 8px; transition: transform 0.2s ease; }
/* Connecting line running through the numbered circles, so the four
   steps read as one sequence instead of four disconnected cards. */
.process-step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 40px;
  right: -28px;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.process-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.process-step:hover { transform: translateY(-3px); }
.process-step:hover .process-step-num { background: var(--accent); color: var(--white); }
.process-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.process-step p { font-size: 0.98rem; margin: 0; }
.process-cta { display: flex; justify-content: center; margin-top: 56px; }
/* Extra breathing room specifically before #kontakt, on top of the CTA
   button's own margin, so the two sections don't feel like they run
   straight into each other. */
#nabidka { padding-bottom: 176px; }

/* ===== Service/product detail sections ===== */
.service-section .service-intro,
.product-detail-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
  width: 100%;
}
.feature-list { display: flex; flex-direction: column; gap: 13px; margin-top: 8px; }
.feature-list li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; color: var(--ink); }
.feature-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}
.gallery-grid a, .gallery-grid .tile {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--field-bg);
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gallery-grid a:hover img { transform: scale(1.04); }
.gallery-wide { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery-wide a { aspect-ratio: 1 / 1; }

/* ===== Contact ===== */
/* Tighter than the generic section padding — the form must realistically
   fit close to one screen without scrolling, so it doesn't get the same
   112px of breathing room as a marketing section. */
#kontakt, #poptavka { padding: 32px 0 112px; scroll-margin-top: calc(var(--nav-h-top) - 40px); }
#kontakt .section-head, #poptavka .section-head { margin-bottom: 16px; }
.contact-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; width: 100%; max-width: 1080px; }
.contact-form { display: flex; flex-direction: column; gap: 8px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.form-row input, .form-row textarea, .form-row select {
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--ink);
  resize: vertical;
  transition: border-color 0.15s ease;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.hidden-field { position: absolute; left: -9999px; top: -9999px; }
.contact-form .btn { align-self: flex-start; margin-top: 8px; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); margin: -6px 0 0; }

.product-select-summary { display: none; }
.product-select-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.product-select-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.product-select-toggle:hover { border-color: var(--accent); color: var(--accent); }
.product-select-toggle .icon-close { display: none; }
.product-select-toggle.is-multi .icon-list { display: none; }
.product-select-toggle.is-multi .icon-close { display: inline-flex; }
.product-select-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.interest-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--field-bg);
  font-size: 0.66rem;
  line-height: 1.2;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.interest-tile:hover:not(:has(input:checked)) {
  border-color: var(--accent);
  background: rgba(143, 90, 33, 0.06);
  color: var(--accent);
}
.interest-tile input { position: absolute; opacity: 0; pointer-events: none; }
.interest-tile:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--white); }

.contact-info { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.contact-info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
}
.contact-info-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--accent-tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info-card h3 { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.contact-info-card a, .contact-info-card p { color: var(--ink); font-weight: 600; font-size: 1.02rem; margin: 0; }
.contact-info-card a { transition: color 0.15s ease; }
.contact-info-card a:hover { color: var(--accent); }
.contact-map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); }
.contact-map iframe { width: 100%; height: 260px; border: 0; display: block; }

/* ===== FAQ ===== */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; width: 100%; }
.faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 22px; }
.faq-item summary {
  padding: 18px 0;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 20px; margin: 0; color: var(--ink-soft); }

/* ===== Product detail pages ===== */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--ink-soft); margin-bottom: 20px; flex-wrap: wrap; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

.product-hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.product-hero p.lead { font-size: 1.12rem; max-width: 56ch; }
.product-hero .product-cta { margin-top: 26px; display: flex; gap: 16px; flex-wrap: wrap; }
.product-hero-highlights { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.product-hero-highlights li { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; color: var(--ink); font-size: 0.97rem; }
.product-hero-highlights li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.product-hero-img {
  align-self: start;
  aspect-ratio: 4 / 3;
  margin-left: -20px;
  margin-top: -8px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--field-bg);
}
.product-hero-img img { width: 100%; height: 100%; object-fit: cover; }

.product-detail-img {
  align-self: start;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--field-bg);
}
.product-detail-img img { width: 100%; height: 100%; object-fit: cover; }
.product-detail-content { display: flex; flex-direction: column; justify-content: center; }
.product-detail-content h2 { margin-bottom: 14px; }
.product-detail-content > p { font-size: 1.03rem; margin-bottom: 22px; }
.product-detail-content .detail-cta { margin-top: 26px; align-self: flex-start; }

/* ===== Simple content pages (legal) ===== */
.page-hero { padding: 64px 0 8px; }
.page-hero h1 { margin-bottom: 6px; }
.legal-content { max-width: 760px; width: 100%; }
.legal-content h2 { font-size: 1.35rem; margin-top: 1.6em; }
.legal-content p, .legal-content li { font-size: 1rem; }
.legal-content ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1em; }
.legal-content li { margin-bottom: 0.4em; }

/* ===== Footer ===== */
.site-footer { background: var(--ink); color: #C9C1B6; padding: 56px 0 28px; }
.site-footer .container { display: flex; flex-direction: column; gap: 32px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; }
.footer-logo img { height: 34px; filter: brightness(0) invert(1); opacity: 0.95; }
.footer-blurb { max-width: 320px; font-size: 0.92rem; color: #A79E90; margin-top: 14px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; max-width: 460px; }
.footer-nav a { font-size: 0.9rem; color: #C9C1B6; }
.footer-nav a:hover { color: var(--white); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.82rem; color: #93897A;
}
.footer-bottom a { color: #93897A; }
.footer-bottom a:hover { color: var(--white); }
.footer-bottom-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* Credit widget — kept 1:1 identical across every site this is deployed on,
   on purpose; it's the maker's own mark, not part of the client's palette. */
.sz-credit {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; opacity: 0.5;
  transition: opacity 0.22s; flex-shrink: 0;
  transform: translateY(-5px);
}
.sz-credit:hover { opacity: 1; }
.sz-credit-bar {
  width: 3px; height: 32px;
  background: #3B82F6; border-radius: 2px; flex-shrink: 0;
}
.sz-credit-text { display: flex; flex-direction: column; gap: 1px; }
.sz-credit-made { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.35); letter-spacing: 1px; text-transform: uppercase; line-height: 1.2; }
.sz-credit-name { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: -0.2px; line-height: 1.2; }
.sz-credit-sub { font-size: 9.5px; color: rgba(255,255,255,0.4); letter-spacing: 0.3px; line-height: 1.2; }

/* ===== Reveal on scroll ===== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .hero h1 { font-size: clamp(1.7rem, 7vw, 3.2rem); }
  .stats-strip { gap: 32px; }
  .product-hero .container {
    grid-template-columns: 1fr;
    gap: 14px;
    grid-template-areas: "breadcrumb" "eyebrow" "h1" "lead" "img" "highlights" "cta";
  }
  .product-hero-copy { display: contents; }
  .product-hero-copy .breadcrumb { grid-area: breadcrumb; margin-bottom: 0; }
  .product-hero-copy .eyebrow { grid-area: eyebrow; }
  .product-hero-copy h1 { grid-area: h1; }
  .product-hero-copy p.lead { grid-area: lead; }
  .product-hero-highlights { grid-area: highlights; margin-top: 4px; }
  .product-hero .product-cta { grid-area: cta; margin-top: 4px; }
  .product-hero-img { grid-area: img; order: initial; height: auto; min-height: 0; aspect-ratio: 16 / 10; max-height: 340px; }
  .service-section .service-intro, .product-detail-split { grid-template-columns: 1fr; gap: 28px; }
  .product-detail-img { order: -1; height: auto; min-height: 0; aspect-ratio: 16 / 10; max-height: 340px; }
  .product-tiles, .product-tiles-2 { grid-template-columns: repeat(2, 1fr); }
  /* Connecting line assumes a single left-to-right row -- wrapping to 2
     columns breaks that geometry, so drop it here. */
  .process-steps { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .process-step::before { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-wide { grid-template-columns: repeat(3, 1fr); }
  section { padding: 80px 0; }
  #nabidka { padding-bottom: 130px; }
}

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .header-phone span { display: none; }
  .nav-toggle { display: flex; }
  .site-header .container { display: flex; justify-content: space-between; }

  body.nav-open .main-nav {
    display: flex;
    position: fixed;
    top: var(--nav-h-top);
    left: 0;
    right: 0;
    width: 100%;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 24px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    max-height: calc(100vh - var(--nav-h-top));
    overflow-y: auto;
  }
  body.nav-open .main-nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border); }

  /* Dropdown je na desktopu plovoucí panel na :hover — v mobilním výsuvném
     menu (úzké, samo scrolluje) by se ořízl. Tady se místo toho rozbalí
     natrvalo jako vnořený seznam v běžném toku, ne jako overlay. */
  body.nav-open .nav-item-dropdown { width: 100%; flex-direction: column; align-items: flex-start; }
  body.nav-open .nav-item-dropdown > a { border-bottom: none; }
  body.nav-open .nav-dropdown-menu {
    position: static;
    padding-top: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: 100%;
  }
  body.nav-open .nav-dropdown-card {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 4px 16px;
    min-width: 0;
  }
  body.nav-open .nav-dropdown-card a { padding: 10px 0; border-bottom: 1px solid var(--border); border-radius: 0; }
}

@media (max-width: 768px) {
  :root { --nav-h-top: 64px; --nav-h-mid: 64px; --nav-h-slim: 64px; --nav-h: 64px; }
  .site-header { height: 64px; }
  .logo-link img, .site-header[data-state="down"] .logo-link img, .site-header[data-state="up"] .logo-link img { height: 38px; }
  .logo-link { flex-shrink: 0; min-width: 0; }
  .logo-link img { max-width: 100%; }
  .header-phone { display: none; }
  .container { padding: 0 16px; }
  .header-actions { gap: 8px; }
  .header-actions .btn-accent { padding: 8px 12px; font-size: 0.78rem; }
  .header-actions .btn-accent .btn-arrow { display: none; }
  section { padding: 56px 0; }
  #nabidka { scroll-margin-top: 32px; padding-bottom: 90px; }
  #kontakt, #poptavka { padding: 44px 0; scroll-margin-top: 25px; }
  .hero { align-items: center; }
  .hero .container { padding-top: 0; padding-bottom: 0; }
  .hero h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas { flex-direction: column; }
  .stats-strip { gap: 10px; flex-wrap: nowrap; margin-top: 24px; }
  .stat-item { min-width: 0; flex: 1; }
  .stat-num { font-size: 1.3rem; margin-bottom: 2px; }
  .stat-label { font-size: 0.68rem; line-height: 1.25; }
  .hero-tagline { font-size: 0.78rem; margin-bottom: 10px; }
  .hero p.lead { font-size: 0.95rem; }
  .lead-trim { display: none; }
  .about-hero { padding: 40px 0 12px; }
  .about-hero h1 { font-size: 1.9rem; }
  .about-why { padding: 40px 0 64px; }
  .why-grid { grid-template-columns: 1fr; gap: 20px; }
  .product-select-summary {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--field-bg); color: var(--ink); font-family: var(--font-body);
    font-size: 0.92rem; font-weight: 600; cursor: pointer;
  }
  .product-select-summary svg { transition: transform 0.2s ease; color: var(--ink-soft); flex-shrink: 0; }
  .product-select-summary.is-open svg { transform: rotate(180deg); }
  .product-select-head, .product-select-grid { display: none; }
  .product-select-summary.is-open ~ .product-select-head { display: flex; }
  .product-select-summary.is-open ~ .product-select-grid { display: grid; }
  .product-tiles, .product-tiles-2 { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .gallery-wide { grid-template-columns: repeat(2, 1fr); }
  .product-select-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .contact-map iframe { height: 220px; }
}

/* ===== Lightbox (galerie) ===== */
/* Klik na fotku v galerii dřív otevíral originál v nové kartě. Teď se
   fotka zvětší přímo na stránce, ~70 % obrazovky, s šipkami na sousední
   fotky v té samé galerii. */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(20, 18, 15, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.lightbox-overlay.is-open { opacity: 1; visibility: visible; }
body.lightbox-open { overflow: hidden; }

.lightbox-frame { position: relative; display: flex; align-items: center; justify-content: center; }
.lightbox-img {
  display: block;
  max-width: 88vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: var(--field-bg);
}
.lightbox-counter {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.lightbox-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.5); }
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
}

@media (max-width: 768px) {
  .lightbox-overlay { gap: 8px; padding: 16px; }
  .lightbox-img { max-width: 88vw; max-height: 78vh; }
  .lightbox-btn { width: 38px; height: 38px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-counter { bottom: -28px; font-size: 0.76rem; }
}