/* Kadeřnictví Braník — sloučené styly webu.
   Vzniklo spojením tds.css, tds-pages.css, user-content.css a malir.css
   (v tomto pořadí — kaskáda odpovídá původním <link> značkám). */

/* ========== tds.css ========== */
/* ============================================================
   TRACK DAY SHOP — Design system
   Light, racing-inspired e-commerce CSS.
   Source: design/project/styles/main.css + index.html inline CSS,
   merged + extended with classes the existing PHP views need.
   ============================================================ */

:root {
  /* Surfaces */
  --bg-0: #ffffff;
  --bg-1: #f4faf9;
  --bg-2: #ffffff;
  --bg-3: #eaf6f3;
  --bg-4: #d9ede8;
  --bg-dark: #0e3733;
  --bg-dark-2: #14453f;

  --line: #dcedea;
  --line-strong: #c3ded9;

  /* Text */
  --fg-0: #17302d;
  --fg-1: #2c4642;
  --fg-2: #5e716e;
  --fg-3: #8fa5a1;
  --fg-on-dark: #ffffff;
  --fg-on-dark-2: #bfe0da;

  /* Brand */
  --red: #0fa08c;
  --red-hot: #14c2aa;
  --red-deep: #0b7e65;
  --red-tint: rgba(15, 160, 140, 0.12);
  --red-glow: rgba(15, 160, 140, 0.28);

  --green: #0e9f5d;
  --amber: #d99000;
  --info: #2563eb;
  --danger: #dc2626;
  --success: #059669;
  --warning: #d99000;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* 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;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(14,14,16,.06);
  --shadow-md: 0 6px 24px rgba(14,14,16,.08);
  --shadow-lg: 0 24px 60px rgba(14,14,16,.12);
  --shadow-red: 0 12px 36px rgba(15, 160, 140, 0.25);

  /* Type */
  --font-display: 'Poppins', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Compatibility shims for older code paths still alive in admin / shared partials
     — they speak in --primary / --dark variable names. Remap to the TDS palette so
     legacy templates inherit the new look without per-file edits. */
  --primary: var(--red);
  --primary-dark: var(--red-deep);
  --primary-light: var(--red-hot);
  --primary-rgb: 15,160,140;
  --dark: var(--bg-1);
  --dark-1: var(--bg-1);
  --dark-2: var(--bg-2);
  --dark-3: var(--bg-3);
  --gray: var(--fg-2);
  --gray-light: var(--fg-3);
  --white: var(--fg-0);
  --accent: var(--red);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Vodorovné přetékání se tu záměrně neřeší. `overflow-x:hidden` na html/body
     dělá z dokumentu posuvný kontejner a tím ruší `position:sticky` — hlavička
     pak při rolování nezůstala nahoře. Sekce přes celou šířku (běžící pás)
     si přetečení ošetřují samy na svém obalu, měřením ověřeno, že stránka
     vodorovný posuv nevyrábí. */
  max-width: 100%;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }

button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--red); color: white; }

/* ============ Layout ============ */
.container { max-width: 1400px; margin: 0 auto; padding: 0 var(--s-5); }
.container-wide { max-width: 1600px; margin: 0 auto; padding: 0 var(--s-5); }

/* ============ Typography ============ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--red);
}

.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(48px, 7vw, 110px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--fg-0);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--fg-0);
  font-style: italic;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-0);
  font-style: italic;
}
.h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--fg-0);
}
.text-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
.muted { color: var(--fg-2); }
.dim { color: var(--fg-3); }

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 14, 16, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}
.site-header a { color: #fff; }

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}
.header-top a { color: rgba(255,255,255,0.7); }
.header-top a:hover { color: #fff; }
.header-top .left { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.header-top .left .red-dot { width: 6px; height: 6px; background: var(--red); border-radius: 50%; box-shadow: 0 0 8px var(--red-glow); display: inline-block; }
.header-top .right { display: flex; gap: 18px; flex-wrap: wrap; }

.header-main {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: 16px 0;
}
.header-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 4px 0; }
.header-logo img { height: 34px; width: auto; display: block; }
.header-logo-fallback { font-family: var(--font-display); font-style: italic; font-size: 28px; color: #fff; letter-spacing: 0.02em; text-transform: uppercase; }
.header-logo-fallback em { color: var(--red); font-style: italic; }

.header-search {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 18px;
  gap: 12px;
  transition: border-color .15s, background .15s;
}
.header-search:focus-within {
  border-color: var(--red);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 4px var(--red-tint);
}
.header-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  color: #fff;
  min-width: 0;
}
.header-search input::placeholder { color: rgba(255,255,255,0.5); }
.header-search .search-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: white;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 13px;
  transition: background .15s;
}
.header-search .search-btn:hover { background: var(--red-deep); }

.header-actions { display: flex; align-items: center; gap: var(--s-3); }
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all .15s;
  color: #fff;
}
.icon-btn:hover { border-color: #fff; background: rgba(255,255,255,0.12); }
.icon-btn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-dark);
}

.cart-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 14px;
  background: var(--red);
  color: white;
  border-radius: var(--r-pill);
  height: 44px;
  font-size: 13px;
  font-weight: 600;
  transition: all .15s;
}
.cart-btn:hover { background: var(--red-deep); }
.cart-btn .cart-count {
  background: white;
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  min-width: 20px;
  text-align: center;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 0 12px 0;
  flex-wrap: wrap;
}
.nav-link {
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-link.active { color: #fff; background: rgba(255,255,255,0.14); }
.nav-link.featured { background: var(--red); color: white; }
.nav-link.featured:hover { background: var(--red-hot); color: white; }

.mobile-menu-btn {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  align-items: center;
  justify-content: center;
  color: #fff;
}
@media (max-width: 900px) {
  .mobile-menu-btn { display: inline-flex; }
  .header-search { display: none; }
  .main-nav { display: none; }
  .header-actions .cart-btn span:not(.cart-count) { display: none; }
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: all .15s;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
}
.btn-primary { background: var(--red); color: white; }
.btn-primary:hover { background: var(--red-hot); transform: translateY(-1px); box-shadow: var(--shadow-red); color: white; }
.btn-dark { background: var(--bg-dark); color: white; }
.btn-dark:hover { background: var(--bg-dark-2); transform: translateY(-1px); box-shadow: var(--shadow-md); color: white; }
.btn-secondary { background: var(--bg-2); color: var(--fg-0); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--bg-3); border-color: var(--fg-3); }
.btn-ghost { background: transparent; color: var(--fg-0); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-3); border-color: var(--fg-2); }
.btn-outline { background: transparent; color: var(--red); border-color: var(--red); }
.btn-outline:hover { background: var(--red); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #b91c1c; color: white; }
.btn-lg { padding: 16px 28px; font-size: 15px; }
.btn-sm { padding: 8px 14px; font-size: 12px; }
.btn-block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============ Cards ============ */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all .2s;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-body { padding: var(--s-5); }

/* ============ Product card (matches partials/product-card.php structure) ============ */
.product-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all .2s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.product-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-card .pc-link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.product-card .image-wrap {
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
  position: relative;
  overflow: hidden;
}
.product-card .image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.product-card:hover .image-wrap img { transform: scale(1.04); }
.product-card .no-image {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-4) 100%);
}
.product-card .badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex; gap: 6px; flex-wrap: wrap;
  z-index: 2;
  max-width: calc(100% - 60px);
}
.product-card .badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: white;
  background: var(--fg-2);
}
.product-card .badge-new { background: var(--red); color: white; }
.product-card .badge-sale, .product-card .sale-badge { background: #f5b400; color: #1a1a1a; }
.product-card .badge-tip { background: var(--green); color: white; }
.product-card .badge-sold { background: var(--fg-2); color: white; }
.product-card .flash-badge { background: var(--red); color: white; }
.product-card .flash-cd { font-family: var(--font-mono); margin-left: 4px; opacity: 0.8; }
.product-card .pc-cat-chip {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  z-index: 2;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-card .info { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-card .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-0);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.product-card .pc-footer-row {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.product-card .stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.product-card .stock::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.product-card .stock.stock-in { color: var(--green); }
.product-card .stock.stock-out { color: var(--fg-3); }
.product-card .stock.stock-order { color: var(--amber); }
.product-card .pc-price-col { display: flex; flex-direction: column; align-items: flex-end; }
.product-card .price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.product-card .price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--fg-0);
  line-height: 1;
}
.product-card .old-price {
  font-size: 12px;
  color: var(--fg-3);
  text-decoration: line-through;
}
.product-card .price-prefix {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  color: var(--fg-2);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.product-card .price-novat { font-size: 11px; color: var(--fg-3); margin-top: 2px; font-family: var(--font-mono); }
.product-card .pc-quick-add { padding: 0 16px 16px; }
.product-card .pc-qa-soldout {
  text-align: center;
  padding: 10px;
  background: var(--bg-3);
  color: var(--fg-3);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.product-card .pc-qa-detail {
  display: block;
  text-align: center;
  padding: 10px;
  background: var(--bg-3);
  color: var(--fg-0);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: all .15s;
}
.product-card .pc-qa-detail:hover { background: var(--bg-dark); color: white; }
.product-card .pc-qa-form { display: flex; gap: 6px; align-items: center; }
.product-card .pc-qa-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--bg-2);
}
.product-card .pc-qa-qtybtn {
  width: 30px; height: 36px;
  background: transparent;
  color: var(--fg-1);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.product-card .pc-qa-qtybtn:hover { background: var(--bg-3); }
.product-card .pc-qa-qtyval {
  width: 36px;
  height: 36px;
  border: none;
  text-align: center;
  background: transparent;
  font-weight: 600;
  outline: none;
}
.product-card .pc-qa-add {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  height: 36px;
  background: var(--red);
  color: white;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background .15s;
  cursor: pointer;
}
.product-card .pc-qa-add:hover { background: var(--red-deep); }
/* Mobile: 2-column product grids leave too little room for a full "Do košíku"
   text + qty stepper. Drop the label and tighten qty so the cart icon stays
   tap-friendly without breaking the row. */
@media (max-width: 600px) {
  .product-card .pc-qa-add-label { display: none; }
  .product-card .pc-qa-add { padding: 0 8px; }
  .product-card .pc-qa-qtybtn { width: 26px; }
  .product-card .pc-qa-qtyval { width: 30px; }
  .product-card .pc-qa-form { gap: 6px; }
}

/* ============ Section badges (free-floating) ============ */
.badge-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.badge-new { background: var(--red); color: white; }
.badge-sale { background: #f5b400; color: #1a1a1a; }
.badge-gift { background: var(--green); color: white; }
.badge-stock { background: var(--bg-3); color: var(--fg-1); border: 1px solid var(--line); }

/* ============ Grids ============ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-4);
}
.product-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 1100px) { .product-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .product-grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* ============ Footer ============ */
.site-footer {
  background: var(--bg-dark);
  color: var(--fg-on-dark-2);
  margin-top: var(--s-9);
}
/* ============ FOOTER — auto-collapsing grid ============
   Default je `auto-fit` minmax(220px, 1fr) — sloupce se zalomí podle SKUTEČNÉ
   šířky kontejneru, ne viewportu. Žádné @media queries, žádný viewport meta
   trable, žádné PHP inline-style přebíjení. Když je containeru < 880px (4×220),
   automaticky to dropne na 3, pak 2, pak 1 sloupec.
   Desktop nad 900px respektuje `--footer-cols` z admina (např. "2fr 1fr 1fr 1fr"). */
.footer-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--s-6);
  padding: var(--s-8) 0 var(--s-7);
}
@media (min-width: 900px) {
  .footer-main { grid-template-columns: var(--footer-cols, 1.4fr 1fr 1fr 1fr 1fr); }
}
.site-footer { width: 100%; overflow-x: hidden; }
.footer-col { min-width: 0; }
.footer-col a, .footer-col p, .footer-col li { overflow-wrap: anywhere; word-break: break-word; }
/* PHP inlinuje style="height:100px;width:auto;" na logo — !important to
   trumfne aby se logo dalo na úzkých sloupcích zmenšit. */
.footer-col img { max-width: 100% !important; height: auto !important; }
.footer-col table { width: 100% !important; max-width: 100%; display: block; overflow-x: auto; }
.footer-col iframe, .footer-col video { max-width: 100% !important; }
@media (max-width: 560px) {
  .footer-main { gap: var(--s-5); padding: var(--s-7) 0 var(--s-5); }
  .footer-col img { max-height: 60px; }
}
.footer-bottom { flex-wrap: wrap; }
.footer-bottom > * { min-width: 0; max-width: 100%; }
.footer-bottom span, .footer-bottom a { overflow-wrap: anywhere; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--fg-on-dark);
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 500;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.footer-col a { color: var(--fg-on-dark-2); font-size: 14px; transition: color .15s; }
.footer-col a:hover { color: white; }
.footer-col p { color: var(--fg-on-dark-2); font-size: 13px; line-height: 1.6; max-width: 280px; }

.footer-brand img { height: 32px; margin-bottom: 16px; }

.footer-social { display: flex; gap: 8px; margin-top: 16px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  color: white;
}
.footer-social a:hover { background: var(--red); border-color: var(--red); color: white; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--s-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-on-dark-2);
  letter-spacing: 0.05em;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a { color: var(--fg-on-dark-2); }
.footer-bottom a:hover { color: white; }

/* ============ Section ============ */
/* Use longhand padding-top/bottom — the `padding: <v> 0` shorthand was wiping
   out the horizontal padding inherited from `.container` / `.container-wide`,
   so any `<section class="container-wide section">` ran edge-to-edge. */
.section { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.section-tight { padding-top: var(--s-7); padding-bottom: var(--s-7); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--s-5);
  gap: var(--s-5);
  flex-wrap: wrap;
}
.section-head .section-head-text { max-width: 600px; }
.section-head .h2 { margin-top: 8px; }

/* ============ USP strip ============ */
.usp-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 800px) { .usp-strip { grid-template-columns: repeat(2, 1fr); } }
.usp-item {
  background: var(--bg-2);
  padding: 22px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.usp-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.usp-text strong { display: block; font-size: 13px; font-weight: 700; color: var(--fg-0); }
.usp-text span { font-size: 12px; color: var(--fg-2); }

/* ============ Breadcrumbs ============ */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.breadcrumbs a { color: var(--fg-2); transition: color .15s; }
.breadcrumbs a:hover { color: var(--fg-0); }
.breadcrumbs .sep { color: var(--line-strong); }
.breadcrumbs .current { color: var(--fg-0); }

/* ============ Image placeholder ============ */
.img-ph {
  position: relative;
  background: linear-gradient(135deg, #f3f3ee 0%, #e9e9e3 100%);
  overflow: hidden;
}
.img-ph::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 18px, rgba(14,14,16,0.025) 18px 36px);
}
.img-ph::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px;
}
.img-ph.with-accent::before {
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(14,14,16,0.025) 18px 36px),
    linear-gradient(135deg, transparent 60%, var(--red-tint) 60.2%, var(--red-tint) 62%, transparent 62.2%);
}
.img-ph.dark { background: linear-gradient(135deg, #1a1a1d 0%, #0e0e10 100%); }
.img-ph.dark::before { background: repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,0.025) 18px 36px); }
.img-ph.dark::after { color: rgba(255,255,255,0.5); }

/* ============ Forms ============ */
.form-group { margin-bottom: var(--s-4); }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--fg-1); margin-bottom: 6px; letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--font-mono); }
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--fg-0);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-tint);
}
.form-textarea { min-height: 120px; resize: vertical; }
.form-help { font-size: 12px; color: var(--fg-3); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--danger); margin-top: 4px; font-weight: 600; }
.form-row { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }

/* ============ Mobile menu drawer ============ */
.mm-overlay {
  position: fixed; inset: 0;
  background: rgba(14,14,16,0.6);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.mm-overlay.open { opacity: 1; pointer-events: auto; }
.mm-drawer {
  position: fixed; top: 0; right: 0;
  width: min(360px, 88vw); height: 100%;
  background: var(--bg-dark);
  color: white;
  z-index: 201;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.mm-drawer.open { transform: translateX(0); }
.mm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mm-head .header-logo img { height: 28px; }
.mm-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: white;
  display: flex; align-items: center; justify-content: center;
}
.mm-body { flex: 1; overflow-y: auto; padding: 16px 0; }
.mm-search {
  display: flex; gap: 6px; padding: 0 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 12px;
}
.mm-search input {
  flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill); padding: 10px 16px; color: white; font-size: 14px; outline: none;
}
.mm-search input::placeholder { color: rgba(255,255,255,0.5); }
.mm-search button {
  background: var(--red); color: white; border-radius: var(--r-pill);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
}
.mm-item { display: flex; flex-direction: column; }
.mm-item > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  color: rgba(255,255,255,0.85);
  font-size: 14px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mm-item > a:hover { background: rgba(255,255,255,0.04); color: white; }
.mm-item .mm-arrow { width: 14px; height: 14px; transition: transform .2s; }
.mm-item.mm-expanded .mm-arrow { transform: rotate(180deg); }
.mm-sub { display: none; padding: 0 20px 12px; flex-direction: column; gap: 4px; }
.mm-item.mm-expanded .mm-sub { display: flex; }
.mm-sub a {
  padding: 8px 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  border-left: 2px solid rgba(255,255,255,0.1);
}
.mm-sub a:hover { color: white; border-color: var(--red); }
.mm-foot {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 12px;
}

/* ============ Infobar / Top announcement ============
   Background + color sets inline from admin/infobar settings. Default fallback
   is here just for safety — should never visibly trigger because PHP always
   inlines the values when rendering the bar. */
.infobar {
  background: #e30613;
  color: #fff;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  padding: 8px 0;
  position: relative;
}
.infobar--bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; box-shadow: 0 -4px 18px rgba(0,0,0,0.18); }
.infobar-inner { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: center; }
.infobar a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.infobar-close {
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  background: transparent; color: inherit; opacity: 0.7; cursor: pointer; font-size: 18px; line-height: 1; border: none;
}
.infobar-close:hover { opacity: 1; }

/* ============ Floating banner (CTA above footer) ============ */
.floating-banner {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--bg-dark);
  color: white;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  padding: 10px 14px 10px 20px;
  display: flex; align-items: center; gap: 14px;
  z-index: 90;
  max-width: calc(100vw - 32px);
}
.floating-banner-text { font-size: 13px; font-weight: 500; line-height: 1.3; }
.floating-banner .btn-sm { padding: 6px 14px; }
.floating-banner-close { color: rgba(255,255,255,0.5); width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.floating-banner-close:hover { color: white; background: rgba(255,255,255,0.08); }

/* ============ Utilities ============ */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-5 { gap: 24px; } .gap-6 { gap: 32px; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-5 { margin-top: 24px; } .mt-6 { margin-top: 32px; }
.mt-7 { margin-top: 48px; } .mt-8 { margin-top: 64px; }
.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 24px; }
.mb-6 { margin-bottom: 32px; } .mb-7 { margin-bottom: 48px; }
.full-width, .w-full { width: 100%; }

/* ============ Scrollbar ============ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }

/* Perla skin: display font bez kurzívy */
h1,h2,h3,.h1,.h2,.h3{font-style:normal !important;}


/* ========== tds-pages.css ========== */
/* ============================================================
   TRACK DAY SHOP — Page-specific styles
   Sections used on homepage, catalog, product detail, blog etc.
   Source: design/project/index.html inline CSS, abstracted.
   ============================================================ */

/* ============================================================
   HERO v2 — full-bleed dark racing hero with animated background.
   Replaces the old split light/dark hero that overflowed horizontally.
   Self-contains via overflow:hidden on the section. Background is pure
   CSS (gradients + animated pseudo-streaks) — no extra HTTP requests.
   ============================================================ */
.hero-v2 {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  /* Flush under the dark header — no empty top band. Compact vertical rhythm:
     less padding, smaller min-height, so hero doesn't dominate the fold. */
  margin-top: -1px;
  padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 5vw, 64px);
  background: #0a0a0c;
  min-height: clamp(420px, 56vh, 580px);
  display: flex;
  align-items: center;
}

.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-bg > * { position: absolute; }

/* Layered base — deep black to brand-red shadow, with red glow on the right */
.hero-bg-grad {
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 78% 50%, rgba(227,6,19,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 5% 100%, rgba(227,6,19,0.10) 0%, transparent 60%),
    linear-gradient(155deg, #15151a 0%, #0a0a0c 60%, #050507 100%);
}

/* Subtle perspective grid suggesting a track stretching to the horizon */
.hero-bg-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 80%);
  opacity: 0.6;
}

/* Light streaks streaming right→left to evoke high-speed motion */
.hero-bg-streaks {
  inset: 0;
  overflow: hidden;
}
.hero-bg-streaks span {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  width: 35%;
  transform: translateX(110vw);
  animation: heroStreak 4.6s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}
.hero-bg-streaks span:nth-child(1) { top: 18%; animation-duration: 5.2s; animation-delay: 0s;   width: 40%; opacity: 0.55; }
.hero-bg-streaks span:nth-child(2) { top: 32%; animation-duration: 3.8s; animation-delay: 1.1s; width: 28%; opacity: 0.7;  background: linear-gradient(90deg, transparent, rgba(227,6,19,0.65), transparent); }
.hero-bg-streaks span:nth-child(3) { top: 47%; animation-duration: 6.0s; animation-delay: 2.4s; width: 50%; opacity: 0.4; }
.hero-bg-streaks span:nth-child(4) { top: 58%; animation-duration: 4.2s; animation-delay: 0.6s; width: 22%; opacity: 0.85; }
.hero-bg-streaks span:nth-child(5) { top: 72%; animation-duration: 5.6s; animation-delay: 3.0s; width: 38%; opacity: 0.45; }
.hero-bg-streaks span:nth-child(6) { top: 82%; animation-duration: 3.4s; animation-delay: 1.8s; width: 18%; opacity: 0.95; background: linear-gradient(90deg, transparent, rgba(255,26,44,0.85), transparent); }
.hero-bg-streaks span:nth-child(7) { top: 90%; animation-duration: 5.0s; animation-delay: 0.3s; width: 30%; opacity: 0.55; }
@keyframes heroStreak {
  0%   { transform: translateX(110vw); }
  100% { transform: translateX(-110vw); }
}

/* Pulsing red glow over the photo region */
.hero-bg-glow {
  right: -12%;
  top: 10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(227,6,19,0.32) 0%, transparent 65%);
  filter: blur(20px);
  animation: heroGlowPulse 5s ease-in-out infinite;
}
@keyframes heroGlowPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1.0; transform: scale(1.05); }
}

/* Chequered finish-line stripe — clearly a layer OF the hero (not a band above it).
   Sits at the bottom of the section; small drop-shadow so it floats over the photo. */
.hero-bg-flag {
  bottom: 0;
  left: 0;
  right: 0;
  height: 22px;
  background:
    repeating-linear-gradient(90deg, #fff 0 16px, #0e0e10 16px 32px);
  opacity: 0.85;
  z-index: 3;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
.hero-bg-flag::before,
.hero-bg-flag::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--red);
  box-shadow: 0 0 12px var(--red);
}
.hero-bg-flag::before { top: -2px; }
.hero-bg-flag::after  { bottom: -2px; opacity: 0.6; }

/* Photo slot — supports a single image or a crossfading slideshow.
   Fills the full height of the hero so there's no empty band above/below it. */
.hero-bg-photos {
  position: absolute;
  right: -4%;
  top: 0;
  bottom: 0;
  width: clamp(560px, 60%, 1100px);
  /* Vignette + fade-to-black on the left edge so the car blends behind the headline */
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 35%, #000 100%),
    radial-gradient(ellipse 90% 80% at 50% 50%, #000 50%, transparent 95%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
}
.hero-bg-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center right;
  opacity: 0.85;
  /* Default crossfade transition, overridden per effect below.
     --hero-tx is set inline by hp.php from the admin's "Délka přechodu" setting. */
  transition: opacity var(--hero-tx, 1.1s) ease-in-out,
              transform var(--hero-tx, 1.1s) ease-in-out;
}

/* When more than one slide, all default invisible; only `.is-active` shows. */
.hero-bg-photos.is-slideshow .hero-bg-photo { opacity: 0; }
.hero-bg-photos.is-slideshow .hero-bg-photo.is-active { opacity: 0.85; }

/* ===== Effect: fade (default) — opacity-only crossfade ===== */
.hero-bg-photos.hero-fx-fade .hero-bg-photo { transform: none; }

/* ===== Effect: slide-left — incoming slides in from the right ===== */
.hero-bg-photos.hero-fx-slide-left .hero-bg-photo  { transform: translate3d(8%, 0, 0); }
.hero-bg-photos.hero-fx-slide-left .hero-bg-photo.is-active { transform: translate3d(0, 0, 0); }

/* ===== Effect: slide-right — incoming from the left ===== */
.hero-bg-photos.hero-fx-slide-right .hero-bg-photo  { transform: translate3d(-8%, 0, 0); }
.hero-bg-photos.hero-fx-slide-right .hero-bg-photo.is-active { transform: translate3d(0, 0, 0); }

/* ===== Effect: slide-up — incoming from below ===== */
.hero-bg-photos.hero-fx-slide-up .hero-bg-photo { transform: translate3d(0, 6%, 0); }
.hero-bg-photos.hero-fx-slide-up .hero-bg-photo.is-active { transform: translate3d(0, 0, 0); }

/* ===== Effect: zoom (Ken Burns) — slow continuous zoom on the active slide ===== */
.hero-bg-photos.hero-fx-zoom .hero-bg-photo { transform: scale(1.0); }
.hero-bg-photos.hero-fx-zoom .hero-bg-photo.is-active {
  transform: scale(1.06);
  transition: opacity var(--hero-tx, 1.1s) ease-in-out,
              transform 7s ease-out;
}

/* ===== Effect: cut — instant swap, no transition ===== */
.hero-bg-photos.hero-fx-cut .hero-bg-photo { transition: none; }

/* Inner content layer — grid with bottom-aligned columns. The CTA row (last
   item in the left column) and the last stat card (last item in the right
   aside) end up on exactly the same baseline thanks to `align-items: end`. */
.hero-v2-inner {
  position: relative;
  width: 100%;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
}
.hero-v2-content {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero-v2-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
}
.hero-v2-pulse {
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--red);
  animation: heroPulse 1.6s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.7); }
}

.hero-v2-headline {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  /* Smaller headline so hero doesn't dominate. Was clamp(54px,8.5vw,132px). */
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.88;
  letter-spacing: 0.005em;
  margin: 0;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.hero-v2-headline .line { display: block; }
.hero-v2-headline .line.red {
  color: var(--red);
  position: relative;
  display: inline-block;
}
.hero-v2-headline .line.red::after {
  content: "";
  position: absolute;
  bottom: -8px; left: 0; right: 0;
  height: 6px;
  background: var(--red);
  transform: skewX(-12deg);
  box-shadow: 0 4px 20px rgba(227,6,19,0.55);
}

.hero-v2-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.74);
  max-width: 540px;
  line-height: 1.6;
  margin: 6px 0 0;
}

.hero-v2-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 6px;
}
.hero-v2-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-pill);
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  transition: all .18s;
}
.hero-v2-ghost:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.10);
  color: #fff;
}

/* Stats — horizontal row of glass cards on the right side of the hero.
   Sits in the grid as the right column of `.hero-v2-inner` with
   `align-items: end`, so its baseline lines up with the CTA buttons row. */
.hero-v2-aside {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  z-index: 2;
}
.hero-v2-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px 18px;
  background: rgba(20, 20, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  min-width: 110px;
}
.hero-v2-stat-card .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: #fff;
}
.hero-v2-stat-card .num em { color: var(--red); font-style: italic; }
.hero-v2-stat-card .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.3;
}

@media (max-width: 1100px) {
  .hero-v2-stat-card { padding: 10px 14px; min-width: 90px; }
  .hero-v2-stat-card .num { font-size: 24px; }
}
/* On smaller screens stats wrap onto a new row below the buttons. */
@media (max-width: 900px) {
  .hero-v2-inner { grid-template-columns: 1fr; }
  .hero-v2-aside { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .hero-v2-aside { display: none; }
}

/* Floating "live" meta card top-right */
.hero-v2-meta {
  position: absolute;
  top: 0;
  right: max(24px, calc((100% - 1340px) / 2 + 24px));
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-v2-meta .dot {
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--red);
  animation: heroPulse 1.6s ease-in-out infinite;
}

/* Floating "bestseller" feature card bottom-right */
.hero-v2-feature {
  position: absolute;
  bottom: 0;
  right: max(24px, calc((100% - 1340px) / 2 + 24px));
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 18px 14px 14px;
  background: rgba(20,20,24,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px);
  text-decoration: none;
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  transition: transform .2s, border-color .2s;
}
.hero-v2-feature:hover { transform: translateY(-2px); border-color: rgba(227,6,19,0.5); color: #fff; }
.hero-v2-feature-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  background: rgba(227,6,19,0.18);
  color: var(--red);
}
.hero-v2-feature-mark svg { width: 22px; height: 22px; }
.hero-v2-feature-body .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-v2-feature-body .name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  margin-top: 4px;
}
.hero-v2-feature-arrow { color: rgba(255,255,255,0.5); }

/* Tachometer-style RPM bars in the bottom-left of the hero */
.hero-v2-tach {
  position: absolute;
  left: max(24px, calc((100% - 1340px) / 2 + 24px));
  bottom: 0;
  display: flex; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.hero-v2-tach-track {
  display: flex; align-items: flex-end; gap: 4px;
  height: 36px;
}
.hero-v2-tach-track .bar {
  display: block;
  width: 4px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  transform-origin: bottom;
  animation: heroTachBar 1.4s ease-in-out infinite;
}
.hero-v2-tach-track .b1 { height: 16%; animation-delay: 0.0s; }
.hero-v2-tach-track .b2 { height: 28%; animation-delay: 0.08s; }
.hero-v2-tach-track .b3 { height: 42%; animation-delay: 0.16s; }
.hero-v2-tach-track .b4 { height: 56%; animation-delay: 0.24s; }
.hero-v2-tach-track .b5 { height: 70%; animation-delay: 0.32s; background: rgba(255,200,30,0.7); }
.hero-v2-tach-track .b6 { height: 82%; animation-delay: 0.40s; background: rgba(255,140,30,0.85); }
.hero-v2-tach-track .b7 { height: 92%; animation-delay: 0.48s; background: var(--red); }
.hero-v2-tach-track .b8 { height: 100%; animation-delay: 0.56s; background: var(--red-hot); box-shadow: 0 0 8px var(--red); }
@keyframes heroTachBar {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(0.55); opacity: 0.55; }
}
.hero-v2-tach-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 2px;
}

/* Tablet — keep two-column visual but compress */
@media (max-width: 1100px) {
  .hero-bg-photo { right: -16%; width: 78%; opacity: 0.5; }
  .hero-v2-feature { right: 24px; }
  .hero-v2-meta { right: 24px; }
  .hero-v2-tach { left: 24px; }
}

/* Mobile — photo fills the ENTIRE hero (top to bottom, edge to edge, full
   opacity). !important sem patří aby přebilo desktop pravidla nastavující
   right:-4%, width:clamp(...), opacity:0.85 a další posuny. */
@media (max-width: 700px) {
  .hero-v2 {
    padding: 28px 0 36px !important;
    min-height: 65vh;
    text-align: left;
  }
  .hero-bg, .hero-bg-photos {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  .hero-bg-photo {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
    opacity: 1 !important;
    background-position: center center !important;
    background-size: cover !important;
  }
  .hero-bg-photos.is-slideshow .hero-bg-photo { opacity: 0 !important; }
  .hero-bg-photos.is-slideshow .hero-bg-photo.is-active { opacity: 1 !important; }
  /* Tmavý overlay pro čitelnost textu */
  .hero-v2::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg,
        rgba(10,10,12,0.78) 0%,
        rgba(10,10,12,0.42) 40%,
        rgba(10,10,12,0.55) 70%,
        rgba(10,10,12,0.85) 100%);
    z-index: 0;
    pointer-events: none;
  }
  .hero-v2-inner { z-index: 2; position: relative; }
  .hero-v2-content { max-width: 100%; }
  .hero-v2-headline { font-size: clamp(42px, 13vw, 72px); }
  .hero-v2-sub { font-size: 15px; }
  .hero-v2-stats { grid-template-columns: repeat(3, 1fr); }
  .hero-v2-stat { padding: 12px 10px; }
  .hero-v2-stat .num { font-size: 26px; }
  .hero-v2-meta { display: none; }
  .hero-v2-feature {
    position: static;
    margin-top: 28px;
    width: 100%;
  }
  .hero-v2-tach { display: none; }
  .hero-bg-flag { width: 100px; height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-streaks span,
  .hero-bg-glow,
  .hero-v2-pulse,
  .hero-v2-meta .dot,
  .hero-v2-tach-track .bar { animation: none !important; }
}

/* ===== Article cards (v2) — homepage blog grid =====
   Card with image on top + body below, hover-zoom thumbnail, category badge over
   the image, "Read article" arrow row that animates on hover. Grid columns are
   set inline by hp.php from the admin "Počet sloupců" setting. */
.article-card-v2 {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg-0);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.article-card-v2:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  color: var(--fg-0);
}
.article-card-v2 .ac2-img {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-3);
  overflow: hidden;
  transition: transform .35s ease;
}
.article-card-v2 .ac2-img.img-ph::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-3);
}
.article-card-v2:hover .ac2-img { transform: scale(1.04); }

.article-card-v2 .ac2-cat {
  position: absolute; top: 12px; left: 12px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(227,6,19,0.3);
}
.article-card-v2 .ac2-cat-inline {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 6px;
}
.article-card-v2 .ac2-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.article-card-v2 .ac2-title {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--fg-0);
  margin: 0;
}
.article-card-v2 .ac2-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-v2 .ac2-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.article-card-v2 .ac2-read {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--red);
  transition: gap .2s ease;
}
.article-card-v2:hover .ac2-read { gap: 10px; }

/* When image hidden, the body grows the card and the title stays prominent. */
.article-card-v2:not(:has(.ac2-img)) .ac2-body { padding-top: 28px; }

@media (max-width: 1100px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .article-grid { grid-template-columns: 1fr !important; }
  .article-card-v2 .ac2-title { font-size: 20px; }
}

/* ===== MARQUEE strip — running ticker between hero and the rest of the page ===== */
.marquee-strip {
  background: var(--bg-dark);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}
.marquee-strip::before,
.marquee-strip::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee-strip::before { left: 0;  background: linear-gradient(90deg, var(--bg-dark), transparent); }
.marquee-strip::after  { right: 0; background: linear-gradient(270deg, var(--bg-dark), transparent); }

.marquee-track {
  display: inline-flex;
  align-items: center;
  /* No gap on the flex container — spacing lives ON each item/separator so
     the duplicated half is byte-identical and the -50% loop is seamless. */
  gap: 0;
  padding: 14px 0;
  white-space: nowrap;
  animation: tdsMarquee 40s linear infinite;
  will-change: transform;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  padding: 0 14px;
}
.marquee-sep {
  color: var(--red);
  font-size: 12px;
  text-shadow: 0 0 10px var(--red);
  padding: 0 14px;
}

@keyframes tdsMarquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ===== Legacy hero (kept for any other view that might still reference it) ===== */
.hero { position: relative; padding: 56px 0 64px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: stretch;
}
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-text { display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.hero-headline {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(64px, 9vw, 148px);
  line-height: 0.84;
  letter-spacing: 0.005em;
  color: var(--fg-0);
}
.hero-headline .red {
  color: var(--red);
  display: inline-block;
  position: relative;
}
.hero-headline .red::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0; right: 0;
  height: 5px;
  background: var(--red);
  transform: skewX(-12deg);
}
.hero-sub { font-size: 17px; color: var(--fg-2); max-width: 520px; line-height: 1.6; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-2);
  max-width: 560px;
}
.hero-stats > div { padding: 18px 22px; border-right: 1px solid var(--line); }
.hero-stats > div:last-child { border-right: none; }
.hero-stats .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 38px;
  color: var(--fg-0);
  line-height: 1;
}
.hero-stats .num em { color: var(--red); font-style: italic; }
.hero-stats .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.hero-visual {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: radial-gradient(circle at 50% 60%, #1a1a1d 0%, #0a0a0c 70%);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.hero-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,0.018) 18px 36px);
  pointer-events: none;
}
.hero-image-ph {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-meta-card {
  position: absolute;
  left: 24px; top: 24px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-meta-card .pulse {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  margin-right: 6px;
  animation: tdsPulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 10px var(--red);
}
@keyframes tdsPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hero-bottom-card {
  position: absolute;
  right: 24px; bottom: 24px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-radius: var(--r-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.hero-bottom-card .car-shape {
  width: 56px; height: 32px;
  border-radius: 6px 12px 4px 4px / 12px 18px 4px 4px;
  background: linear-gradient(180deg, #2a2a2e 0%, #0e0e10 100%);
  position: relative;
  flex-shrink: 0;
}
.hero-bottom-card .car-shape::before,
.hero-bottom-card .car-shape::after {
  content: "";
  position: absolute;
  bottom: -3px;
  width: 10px; height: 10px;
  background: var(--bg-0);
  border: 2px solid var(--red);
  border-radius: 50%;
}
.hero-bottom-card .car-shape::before { left: 5px; }
.hero-bottom-card .car-shape::after { right: 5px; }
.hero-bottom-card .car-info .label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-bottom-card .car-info .name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--fg-0);
  line-height: 1;
}

/* ===== CAR PICKER ===== */
.car-picker {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  border-radius: var(--r-xl);
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.car-picker::before {
  content: "TVOJE AUTO";
  position: absolute;
  right: -10px; top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 120px;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  letter-spacing: 0.05em;
}
.car-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
}
.car-picker-head .h2 { margin-top: 6px; color: white; }
.car-picker-head .eyebrow { color: rgba(255,255,255,0.6); }
.car-picker-head .eyebrow::before { background: var(--red); }
.car-picker-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  position: relative;
}
@media (max-width: 800px) { .car-picker-form { grid-template-columns: 1fr; } }
.car-picker-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 14px;
  color: white;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 48px;
  cursor: pointer;
  transition: border-color .15s;
}
.car-picker-select:hover, .car-picker-select:focus { outline: none; border-color: var(--red); }
.car-picker-select option { background: var(--bg-dark); color: white; }

/* ===== Categories ===== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-tile {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: all .15s;
  overflow: hidden;
  min-height: 168px;
  color: inherit;
}
.cat-tile:hover {
  border-color: var(--fg-0);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.cat-tile .ct-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--red-tint);
  color: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.cat-tile .ct-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--fg-0);
  margin-top: auto;
  line-height: 1.05;
}
.cat-tile .ct-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cat-tile .ct-arrow {
  position: absolute;
  top: 18px; right: 18px;
  color: var(--fg-3);
  transition: all .15s;
}
.cat-tile:hover .ct-arrow {
  color: var(--red);
  transform: translate(2px, -2px);
}

/* ===== Featured banners ===== */
.feat-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) { .feat-row { grid-template-columns: 1fr; } }
.feat-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px;
  transition: all .2s;
  color: inherit;
}
.feat-card.lg {
  background: linear-gradient(135deg, #0e0e10 0%, #1a1a1d 60%, #2a0a0e 100%);
  color: white;
  border: none;
}
.feat-card.lg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(227,6,19,0.25), transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,255,255,0.02) 20px 40px);
  pointer-events: none;
}
.feat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feat-card .feat-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.feat-card.lg .feat-eyebrow { color: var(--red-hot); }
.feat-card .feat-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(36px, 4.5vw, 60px);
  text-transform: uppercase;
  color: var(--fg-0);
  line-height: 0.95;
  margin-bottom: 12px;
}
.feat-card.lg .feat-title { color: white; }
.feat-card .feat-desc {
  color: var(--fg-2);
  font-size: 14px;
  margin-bottom: 22px;
  max-width: 420px;
}
.feat-card.lg .feat-desc { color: rgba(255,255,255,0.7); }
.feat-card .feat-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.feat-card .feat-watermark {
  position: absolute;
  right: -20px; top: -20px;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(227,6,19,0.3);
  pointer-events: none;
}
.feat-card .feat-watermark::after {
  content: "";
  position: absolute; inset: 30px;
  border-radius: 50%;
  border: 1px dashed rgba(227,6,19,0.18);
}
.feat-side { display: flex; flex-direction: column; gap: 16px; }
.feat-mini {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  transition: all .15s;
  color: inherit;
}
.feat-mini:hover { border-color: var(--fg-0); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.feat-mini .feat-mini-img { width: 90px; height: 90px; border-radius: var(--r-md); flex-shrink: 0; background-size: cover; background-position: center; }
.feat-mini .feat-mini-text { flex: 1; }
.feat-mini .feat-mini-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--red);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.feat-mini .feat-mini-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--fg-0);
  line-height: 1;
}
.feat-mini .feat-mini-desc { font-size: 13px; color: var(--fg-2); margin-top: 6px; }

/* ===== Brand strip ===== */
.brand-strip {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 32px;
  align-items: center;
}
@media (max-width: 1100px) { .brand-strip { grid-template-columns: repeat(4, 1fr); } }
.brand-logo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
  letter-spacing: 0.05em;
  transition: color .15s;
  cursor: pointer;
}
.brand-logo:hover { color: var(--fg-0); }

/* ===== Reviews ===== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } }
.review-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all .15s;
}
.review-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.review-card .stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; }
.review-card .quote { color: var(--fg-1); font-size: 14px; line-height: 1.6; flex: 1; }
.review-card .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.05em;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.review-card .meta .product {
  display: block;
  color: var(--fg-0);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* ===== Article cards ===== */
.article-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr; } }
.article-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .2s;
  color: inherit;
}
.article-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.article-card .ac-img { aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--bg-3); }
.article-card.lg .ac-img { aspect-ratio: 4 / 3; }
.article-card .ac-body { padding: 22px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.article-card .ac-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.article-card .ac-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--fg-0);
  text-transform: uppercase;
  line-height: 1.05;
}
.article-card.lg .ac-title { font-size: 32px; }
.article-card .ac-meta {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ===== About block ===== */
.about-block {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .about-block { grid-template-columns: 1fr; padding: 32px; } }

/* ===== Newsletter ===== */
.newsletter {
  background: var(--bg-dark);
  color: white;
  border-radius: var(--r-xl);
  padding: 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content: "";
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 100%;
  background: radial-gradient(ellipse, rgba(227,6,19,0.18), transparent 60%);
}
.newsletter .eyebrow { color: rgba(255,255,255,0.6); position: relative; }
.newsletter .h2 { color: white; position: relative; margin: 12px 0 12px; }
.newsletter p { position: relative; color: rgba(255,255,255,0.7); }
.newsletter-form {
  max-width: 520px;
  margin: 24px auto 0;
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-pill);
  padding: 6px;
  position: relative;
}
.newsletter-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 18px;
  color: white;
  font-size: 14px;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-msg { position: relative; max-width: 520px; margin: 12px auto 0; padding: 8px 14px; border-radius: var(--r-md); font-size: 13px; }
.newsletter-msg.ok { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.newsletter-msg.err { background: rgba(239,68,68,0.18); color: #fca5a5; }

/* Full-bleed newsletter — drop border radius (no longer floating) and add
   inner padding that aligns to the centered content column on wide screens.
   Hero-style animated background sits behind the content; reuses the same
   CSS rules as .hero-bg-grid / .hero-bg-streaks / .hero-bg-glow so visuals
   match. */
.newsletter-section .newsletter {
  border-radius: 0;
  padding: 64px max(24px, calc((100vw - 1100px) / 2 + 24px));
}
@media (max-width: 900px) {
  .newsletter-section .newsletter { padding: 48px 20px; }
}
.newsletter-section .newsletter::before { display: none; } /* replaced by .hero-bg-glow */
.newsletter-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.newsletter-bg > * { position: absolute; }
/* Position the glow on the right side of the section so the layout mirrors
   the hero (red glow drifting in from the side). */
.newsletter-section .newsletter-bg .hero-bg-glow {
  right: -20%; top: -20%; width: 50%; aspect-ratio: 1;
}
.newsletter-inner { position: relative; z-index: 1; text-align: center; }

/* ===== Homepage bannery (admin-managed click-through banners) =====
   Outer card supplies aspect-ratio + overflow:hidden; .bannery-img is the
   background image layer that the hover effect transforms. Effects use
   .bannery-card.hover-<name> .bannery-img so they don't fight other layers
   (overlay, content). Mobile collapses the grid to a single column.
   The section is a flex item inside .hp-sections (display:flex column);
   .container-wide's `margin: 0 auto` would make it shrink-to-fit, and
   since cards use aspect-ratio with no intrinsic width the whole section
   would collapse to its padding. Explicit width:100% prevents that. */
.bannery-section { width: 100%; box-sizing: border-box; }
.bannery-grid { width: 100%; }
@media (max-width: 900px) {
  .bannery-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}
/* Full-bleed: section breaks out of any container max-width and spans the
   viewport edge to edge. Used by single-banner bannery and car-picker. */
.section-fullbleed,
.bannery-fullbleed { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding-left: 0; padding-right: 0; box-sizing: border-box; }
.bannery-fullbleed .bannery-card { border-radius: 0; box-shadow: none; aspect-ratio: 21 / 9; }
@media (max-width: 900px) { .bannery-fullbleed .bannery-card { aspect-ratio: 4 / 3; } }
/* Mobile: pull the single-banner bannery back into the page gutter so it sits
   inset like the other padded home sections instead of touching the viewport
   edges. The card gets its rounded corners and subtle shadow back. */
@media (max-width: 700px) {
  .bannery-fullbleed {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    padding-left: var(--s-5);
    padding-right: var(--s-5);
  }
  .bannery-fullbleed .bannery-card {
    border-radius: var(--r-md, 14px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  }
}
/* Car picker as a full-bleed ribbon — drop the rounded corners on the card
   (no longer needed when it covers the full viewport) and add inner padding
   so the form doesn't kiss the viewport edges. */
.car-picker-section .car-picker { border-radius: 0; padding: 56px max(24px, calc((100vw - 1600px) / 2 + 24px)); }
@media (max-width: 900px) { .car-picker-section .car-picker { padding: 36px 20px; } }
.bannery-card { box-shadow: 0 4px 18px rgba(0,0,0,0.18); transition: transform .35s ease, box-shadow .35s ease; }
.bannery-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.28); }
.bannery-img { transition: transform .6s ease, filter .4s ease, opacity .4s ease; will-change: transform, filter; }

/* Hover effects — applied to the image layer only */
.bannery-card.hover-zoom:hover       .bannery-img { transform: scale(1.06); }
.bannery-card.hover-zoom-slow:hover  .bannery-img { transform: scale(1.12); transition-duration: 1.2s; }
.bannery-card.hover-brightness:hover .bannery-img { filter: brightness(1.18); }
.bannery-card.hover-darken:hover     .bannery-img { filter: brightness(0.7); }
.bannery-card.hover-grayscale       .bannery-img { filter: grayscale(0.85); }
.bannery-card.hover-grayscale:hover .bannery-img { filter: grayscale(0); }
.bannery-card.hover-blur            .bannery-img { filter: blur(4px); }
.bannery-card.hover-blur:hover      .bannery-img { filter: blur(0); }
.bannery-card.hover-lift:hover { transform: translateY(-6px); }

/* Shine sweep — diagonal gloss across the card on hover */
.bannery-card.hover-shine::after {
  content: "";
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left .8s ease;
  z-index: 2;
}
.bannery-card.hover-shine:hover::after { left: 125%; }

/* Button hover — uses CSS vars set inline by PHP so admin colors win */
.bannery-card .bannery-btn { transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
.bannery-card:hover .bannery-btn,
.bannery-card .bannery-btn:hover {
  background: var(--bn-btn-bg-hover, var(--red-hot, #ff1a2c));
  color: var(--bn-btn-fg-hover, #fff);
  border-color: var(--bn-btn-bg-hover, var(--red-hot, #ff1a2c));
}

/* Content layer should sit above image + overlay */
.bannery-card .bannery-content { z-index: 3; }
.bannery-card .bannery-img { z-index: 0; }


/* ========== user-content.css ========== */
/**
 * Styly pro user-generated obsah z WYSIWYG editoru (blog články, stránky,
 * popisy produktů, popisy balíčků, atd.).
 *
 * Aplikuje se přes sdílenou třídu `.uc` nebo přes existující kontejnery
 * (`.product-description`, `.blog-content`, `.page-content`). Zrcadlí
 * vizuál, který má klient v adminu v `wysiwyg-editor`, aby výsledek
 * na webu vypadal identicky s náhledem v editoru.
 *
 * Selektor je scopovaný — aplikuje se jen uvnitř kontejneru, ne na
 * celou stránku (admin.js v editoru používá `.wysiwyg-editor` scope).
 */

/* Kontejner kde user-content žije — všechno níže je scopované. */
.uc,
.product-description,
.blog-content,
.page-content {
    line-height: 1.75;
    color: var(--fg-1);
    font-size: 16px;
}

/* TDS Page Builder block headings — used by blocks/heading.php */
.tds-block-display {
    font-family: var(--font-display);
    font-style: italic;
    text-transform: uppercase;
    color: var(--fg-0);
    letter-spacing: 0.005em;
    font-weight: 400;
}
.tds-block-eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-3);
    font-weight: 600;
}

/* CMS text block container — render WYSIWYG content with same prose styling
   as .page-content / .uc, so admin sees consistent typography across blocks. */
.cms-content {
    line-height: 1.75;
    color: var(--fg-1);
}
.cms-content h1, .cms-content h2, .cms-content h3 {
    font-family: var(--font-display);
    font-style: italic;
    text-transform: uppercase;
    color: var(--fg-0);
    letter-spacing: 0.005em;
    line-height: 1.05;
    margin: 2rem 0 0.75rem;
}
.cms-content h2 { font-size: 32px; }
.cms-content h3 { font-size: 24px; }
.cms-content h4, .cms-content h5, .cms-content h6 {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-3);
    margin: 1.5rem 0 0.5rem;
    font-weight: 600;
}
.cms-content p { margin: 0.875rem 0; }
.cms-content strong { color: var(--fg-0); font-weight: 700; }
.cms-content a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.cms-content a:hover { color: var(--red-hot); }
.cms-content ul, .cms-content ol { padding-left: 1.5rem; margin: 0.75rem 0; }
.cms-content li { margin-bottom: 0.375rem; }
.cms-content hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
.cms-content blockquote {
    border-left: 4px solid var(--red);
    padding: 0.875rem 1.25rem;
    margin: 1.25rem 0;
    background: var(--red-tint);
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
    font-style: italic;
}

/* ============================================================
 * TYPOGRAFIE — TDS look: Bebas italic pro h2/h3, Inter pro tělo.
 * Page-content (právní stránky) má větší pádlo nahoře, ať dýchá.
 * ============================================================ */
.page-content > *:first-child { margin-top: 0; }
.uc h2, .product-description h2, .blog-content h2, .page-content h2 {
    font-family: var(--font-display);
    font-style: italic;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 1.05;
    color: var(--fg-0);
    margin: 2.5rem 0 0.75rem;
    letter-spacing: 0.005em;
}
.uc h3, .product-description h3, .blog-content h3, .page-content h3 {
    font-family: var(--font-display);
    font-style: italic;
    text-transform: uppercase;
    font-size: 24px;
    line-height: 1.1;
    color: var(--fg-0);
    margin: 2rem 0 0.5rem;
}
.uc h4, .product-description h4, .blog-content h4, .page-content h4 {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.uc p, .product-description p, .blog-content p, .page-content p {
    margin: 0.875rem 0;
    color: var(--fg-1);
}
.uc strong, .page-content strong { color: var(--fg-0); font-weight: 700; }
.uc a, .product-description a, .blog-content a, .page-content a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}
.uc a:hover, .product-description a:hover, .blog-content a:hover, .page-content a:hover {
    color: var(--red-hot);
}

/* ============================================================
 * CITACE, KÓD, ODDĚLOVAČ
 * ============================================================ */
.uc blockquote, .product-description blockquote,
.blog-content blockquote, .page-content blockquote {
    border-left: 4px solid var(--red);
    padding: 0.875rem 1.25rem;
    margin: 1.25rem 0;
    background: var(--red-tint);
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
    color: var(--fg-1);
    font-style: italic;
}
.uc pre, .product-description pre, .blog-content pre, .page-content pre {
    background: #0d1117;
    color: #e6edf3;
    padding: 1rem;
    border-radius: 0.5rem;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
    overflow-x: auto;
    margin: 1rem 0;
}
.uc hr, .product-description hr, .blog-content hr, .page-content hr {
    border: none; border-top: 1px solid var(--line); margin: 2rem 0;
}

/* ============================================================
 * SEZNAMY
 * ============================================================ */
.uc ul, .product-description ul, .blog-content ul, .page-content ul,
.uc ol, .product-description ol, .blog-content ol, .page-content ol {
    padding-left: 1.5rem;
    margin: 0.75rem 0;
}
.uc li, .product-description li, .blog-content li, .page-content li {
    margin-bottom: 0.375rem;
}

/* ============================================================
 * OBRÁZKY, VIDEO
 * ============================================================ */
.uc img, .product-description img, .blog-content img, .page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
    display: block;
}
.uc iframe, .product-description iframe,
.blog-content iframe, .page-content iframe {
    max-width: 100%;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

/* ============================================================
 * TABULKY — stejný vzhled jako v editoru, ale přizpůsobený pro light frontend
 * ============================================================ */
.uc table, .product-description table, .blog-content table, .page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.9375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    overflow: hidden;
}
.uc table th, .product-description table th,
.blog-content table th, .page-content table th {
    background: var(--bg-dark);
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bg-dark);
}
.uc table td, .product-description table td,
.blog-content table td, .page-content table td {
    border: 1px solid var(--line);
    padding: 0.75rem 1rem;
    text-align: left;
    min-width: 80px;
    color: var(--fg-1);
}
.uc table tr:nth-child(even) td, .product-description table tr:nth-child(even) td,
.blog-content table tr:nth-child(even) td, .page-content table tr:nth-child(even) td {
    background: #f9fafb;
}

/* ============================================================
 * PRESETOVÉ BLOKY — info / warning / success / quote / highlight
 * Zrcadlí vzhled ze editoru (wysiwyg-full.php preset buttons),
 * ale přizpůsobené pro světlé frontend theme.
 * ============================================================ */
.uc .preset-box, .product-description .preset-box,
.blog-content .preset-box, .page-content .preset-box {
    padding: 1rem 1rem 1rem 3rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    position: relative;
    line-height: 1.6;
}
.uc .preset-box::before, .product-description .preset-box::before,
.blog-content .preset-box::before, .page-content .preset-box::before {
    position: absolute;
    left: 0.875rem;
    top: 0.9375rem;
    font-size: 1.25rem;
    line-height: 1;
}

/* ℹ Info box — modrý / primary */
.uc .preset-info, .product-description .preset-info,
.blog-content .preset-info, .page-content .preset-info {
    background: rgba(0, 149, 179, 0.08);
    border: 1px solid rgba(0, 149, 179, 0.3);
    color: #0a1628;
}
.uc .preset-info::before, .product-description .preset-info::before,
.blog-content .preset-info::before, .page-content .preset-info::before {
    content: '\2139';
    color: #0095b3;
    font-weight: 700;
}

/* ⚠ Upozornění — oranžový / warning */
.uc .preset-warning, .product-description .preset-warning,
.blog-content .preset-warning, .page-content .preset-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #78350f;
}
.uc .preset-warning::before, .product-description .preset-warning::before,
.blog-content .preset-warning::before, .page-content .preset-warning::before {
    content: '\26A0';
    color: #d97706;
}

/* ✓ Potvrzení — zelený / success */
.uc .preset-success, .product-description .preset-success,
.blog-content .preset-success, .page-content .preset-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #064e3b;
}
.uc .preset-success::before, .product-description .preset-success::before,
.blog-content .preset-success::before, .page-content .preset-success::before {
    content: '\2714';
    color: #10b981;
}

/* " Citace — fialový highlight */
.uc .preset-quote, .product-description .preset-quote,
.blog-content .preset-quote, .page-content .preset-quote {
    background: rgba(139, 92, 246, 0.08);
    border-left: 4px solid #8b5cf6;
    padding: 1rem 1.25rem;
    font-style: italic;
    font-size: 1.0625rem;
    color: #4c1d95;
    border-radius: 0 0.5rem 0.5rem 0;
    margin: 1rem 0;
}

/* ★ Zvýraznění — gradient centered */
.uc .preset-highlight, .product-description .preset-highlight,
.blog-content .preset-highlight, .page-content .preset-highlight {
    background: linear-gradient(135deg, rgba(0, 149, 179, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(0, 149, 179, 0.25);
    padding: 1rem 1.25rem;
    text-align: center;
    font-weight: 600;
    font-size: 1.0625rem;
    color: #0a1628;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

/* ============================================================
 * ADAPTIVITA — mobilní zobrazení
 * ============================================================ */
@media (max-width: 640px) {
    .uc h2, .product-description h2, .blog-content h2, .page-content h2 { font-size: 1.25rem; }
    .uc h3, .product-description h3, .blog-content h3, .page-content h3 { font-size: 1.125rem; }
    .uc table, .product-description table, .blog-content table, .page-content table {
        font-size: 0.8125rem;
    }
    .uc table th, .product-description table th,
    .blog-content table th, .page-content table th,
    .uc table td, .product-description table td,
    .blog-content table td, .page-content table td {
        padding: 0.5rem 0.625rem;
    }
    .uc .preset-box, .product-description .preset-box,
    .blog-content .preset-box, .page-content .preset-box {
        padding: 0.875rem 0.875rem 0.875rem 2.5rem;
    }
}




/* ============================================================
   KADEŘNICTVÍ BRANÍK — editorial skin
   Fashion-magazine jazyk: obří serif Fraunces, bone papír, inkoust,
   koňakový akcent, běžící pásy, číslované řádky, výrazný rytmus.
   Drží názvy tříd původního skinu (topbar, site, btn, foot, pagehead…),
   aby fungovaly všechny CMS podstránky.
   ============================================================ */

:root{
 /* Paleta vychází ze skutečného interiéru salonu: bílé stěny, černé rámy
    zrcadel a křesla, zelené rostliny a květinová tapeta, šedá podlaha. */
 --paper:#f6f5f2;--paper-2:#eceae4;--card:#ffffff;
 --bg:var(--paper);--soft:#eceae4;--soft2:#f1f0ec;--softb:#e6e4dd;
 --ink:#14161a;--ink-2:#2b2f34;--muted:#77797a;
 --gold:#2f6b53;--gold-d:#255543;--gold-l:#5d9179;
 --cream:#f6f5f2;
 --line:#dedcd5;--line-d:#14161a;--mintg:#dfe5dd;
 --shadow-ink:rgba(20,22,26,.16);
 /* aliasy původních skinů — ať zdědí celý CMS zbytek */
 --green:var(--gold);--green-d:var(--gold-d);--green-l:var(--gold-l);
 --blue:var(--gold);--blue-d:var(--gold-d);--blue-l:var(--gold-l);
 --teal:var(--gold);--teal-d:var(--gold-d);--mint:var(--mintg);
 --rose:#a8604f;--coral:#a8604f;--yellow:#c9a45c;
 --wood:#a8814f;
 --tape:rgba(236,234,228,.92);--tape-d:rgba(222,220,213,.9);
 --primary:var(--gold);--primary-dark:var(--gold-d);--primary-light:var(--gold-l);
 --accent:var(--gold);
 --font-display:'Fraunces',Georgia,serif;
 --font-body:'Space Grotesk','Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);line-height:1.65;font-size:16.5px;background-color:var(--paper);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E")}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:560;line-height:1.05;letter-spacing:-.01em;font-variation-settings:"SOFT" 40,"WONK" 0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--paper)}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.narrow{max-width:920px;margin:0 auto;padding:0 28px}

/* ---------- tlačítka: pilulka s šipkou, inkoustové ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:var(--paper);padding:15px 30px;
 border-radius:999px;font-family:var(--font-body);font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;transition:.25s cubic-bezier(.4,0,.2,1);border:1.5px solid var(--ink);cursor:pointer}
.btn::after{content:"→";font-size:15px;transition:transform .25s}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-2px)}
.btn:hover::after{transform:translateX(4px)}
.btn.line{background:transparent;color:var(--ink)}
.btn.line:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.soft{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.soft:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn.blue,.btn.dark{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.blue:hover,.btn.dark:hover{background:var(--ink);border-color:var(--ink)}
.btn.nrw::after{content:none}

/* ---------- typografické akcenty ---------- */
.eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.34em;font-size:11.5px;font-weight:500;color:var(--gold-d);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold-d);display:inline-block}
section{padding:100px 0}
h2.title{font-size:clamp(2.4rem,5vw,4rem);font-weight:500}
h2.title em,.it{font-style:italic;font-weight:420;color:var(--gold-d)}
.lead{color:var(--muted);font-size:1.08rem}
.center{text-align:center}
.center .eyebrow::after{content:"";width:34px;height:1px;background:var(--gold-d);display:inline-block}
.brush-u{position:relative;display:inline-block;font-style:italic;color:var(--gold-d)}
.brush-u::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:1.5px;background:var(--gold-d)}

/* ---------- marquee pás ---------- */
.marq{overflow:hidden;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:var(--paper);padding:16px 0;position:relative}
.marq.inv{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.marq-in{display:flex;gap:0;width:max-content;animation:marq 28s linear infinite}
.marq:hover .marq-in{animation-play-state:paused}
.marq-in span{font-family:var(--font-display);font-size:clamp(1.15rem,2.4vw,1.7rem);font-weight:480;white-space:nowrap;display:inline-flex;align-items:center;letter-spacing:.02em}
.marq-in span i{font-style:normal;color:var(--gold);margin:0 26px;font-size:.8em}
.marq-in span em{font-style:italic;color:var(--gold-d)}
.marq.inv .marq-in span em{color:var(--gold-l)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- topbar ---------- */
.topbar{background:var(--ink);border-bottom:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#a9adb1}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:42px}
.topbar .r{display:flex;gap:26px}.topbar b{color:var(--paper);font-weight:500}
@media(max-width:700px){.topbar .r span:first-child{display:none}}

/* ---------- nav ---------- */
header.site{position:sticky;top:0;z-index:100;background:rgba(242,237,229,.92);backdrop-filter:blur(14px);border-bottom:1.5px solid var(--ink)}
.site .wrap{display:flex;align-items:center;justify-content:space-between;min-height:76px;padding-top:6px;padding-bottom:6px}
.brand{font-family:var(--font-display);font-size:25px;font-weight:600;display:inline-flex;align-items:center;gap:11px;color:var(--ink);letter-spacing:-.01em;line-height:1}
.brand .mark{display:inline-flex;align-items:center;color:var(--gold);flex:none}
.brand .mark svg{display:block}
.brand .wm{letter-spacing:.02em}
.brand .wm + .b2{margin-left:-4px}
.brand img.dot-img{background:none;object-fit:contain;padding:0;height:38px;width:auto;max-width:170px}
/* Strop šířky drží logo v rozumných mezích, ale nesmí bránit tomu, aby šlo
   v Nastavení zvětšit — proto je posunutý až za nejvyšší povolenou výšku. */
.brand img.brand-logo{width:auto;max-width:460px;object-fit:contain}
.brand .wm{color:inherit}
.brand .b2{color:var(--gold-d);font-style:italic;font-weight:480}
/* Odkazy mají klikací plochu i kolem textu — dřív se dala trefit jen
   samotná písmena a mezi položkami byla mrtvá mezera. Rozteč proto drží
   vnitřní odsazení odkazu, ne gap; navenek zůstává stejná. */
.menu{display:flex;gap:6px;list-style:none;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.menu a{color:var(--muted);transition:color .2s;padding:13px 14px;position:relative;display:inline-flex;align-items:center;min-height:44px}
.menu a::after{content:"";position:absolute;left:14px;right:14px;bottom:9px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.menu a:hover{color:var(--ink)}
.menu a:hover::after{transform:scaleX(1)}
.menu a.active{color:var(--ink)}
.menu a.active::after{transform:scaleX(1);background:var(--gold)}
.menu a:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.nav-r{display:flex;align-items:center;gap:14px}
.burger{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--ink);
  align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px}
.burger:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.mobmenu{display:none}
@media(max-width:960px){
 .menu{display:none}
 .burger{display:inline-flex}
 .nav-r .btn{display:none}
 .mobmenu{display:none;flex-direction:column;background:var(--card);border-top:1.5px solid var(--ink);padding:10px 28px 18px}
 .mobmenu.open{display:flex}
 .mobmenu a{display:flex;align-items:center;min-height:52px;padding:14px 6px;border-bottom:1px solid var(--line);
   font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--ink)}
 .mobmenu a:active{background:var(--soft2)}
}

/* ---------- HERO: split — obsah vlevo, fotka na plnou výšku vpravo ---------- */
.hero{padding:0;background:var(--paper);overflow:hidden;position:relative;border-bottom:1.5px solid var(--ink)}
.hero-split{display:grid;grid-template-columns:1fr 1fr;min-height:min(86vh,760px)}
.hero-split .col-txt{display:flex;flex-direction:column;justify-content:center;padding:64px 56px 64px max(28px,calc((100vw - 1240px)/2 + 28px))}
.hero-kicker{display:flex;align-items:center;gap:14px;font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.hero-kicker::before{content:"";width:44px;height:1.5px;background:var(--gold);flex:none}
.hero-kicker b{color:var(--gold-d);font-weight:500}
.hero-h{font-size:clamp(2.9rem,5.6vw,4.9rem);line-height:1;font-weight:520;letter-spacing:-.022em;margin:0 0 22px}
.hero-h .l2{display:block;font-style:italic;font-weight:400;color:var(--gold-d)}
.hero-h .out{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.hero-split p{font-size:1.08rem;color:var(--muted);max-width:440px;margin:0 0 30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;gap:0;margin-top:44px;flex-wrap:wrap;border-top:1.5px solid var(--ink)}
.hm{display:flex;flex-direction:column;gap:3px;padding:16px 26px 0 0;margin-right:26px;border-right:1px solid var(--line)}
.hm:last-child{border-right:none;margin-right:0}
.hm b{font-family:var(--font-display);font-size:1.45rem;font-weight:560;color:var(--ink);line-height:1}
.hm small{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero-split .col-img{position:relative;border-left:1.5px solid var(--ink);overflow:hidden;background:var(--soft)}
.hero-split .col-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-split .col-img .ph-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:96px;opacity:.35;background:linear-gradient(150deg,var(--soft),var(--mintg))}
.hero-split .tag{position:absolute;top:0;right:0;background:var(--gold);color:#fff;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;padding:12px 20px;font-weight:500;z-index:3}
.hero-split .caption{position:absolute;left:0;bottom:0;background:var(--paper);border-top:1.5px solid var(--ink);border-right:1.5px solid var(--ink);padding:16px 24px;display:flex;align-items:center;gap:14px;z-index:3}
.hero-split .caption .n{font-family:var(--font-display);font-size:1.5rem;font-weight:600;font-style:italic;color:var(--gold-d);line-height:1}
.hero-split .caption small{color:var(--muted);font-size:11px;line-height:1.45;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:960px){
 .hero-split{grid-template-columns:1fr;min-height:0}
 .hero-split .col-txt{padding:52px 28px 46px;order:2}
 .hero-split .col-img{order:1;border-left:none;border-bottom:1.5px solid var(--ink);aspect-ratio:4/3}
 .hero-split p{max-width:none}
 .hero-meta{margin-top:34px}
}
@media(max-width:520px){
 .hm{padding-right:18px;margin-right:18px}
 .hm b{font-size:1.25rem}
}

/* ---------- editorial seznam služeb ---------- */
.edlist{border-top:1.5px solid var(--ink)}
.edrow{display:grid;grid-template-columns:70px 1.5fr 1fr auto;gap:22px;align-items:center;padding:26px 6px;border-bottom:1.5px solid var(--ink);transition:.25s;position:relative;cursor:default}
.edrow:hover{background:var(--card);padding-left:18px}
.edrow .no{font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--muted)}
.edrow h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:520;transition:.25s}
.edrow:hover h3{color:var(--gold-d);font-style:italic}
.edrow .ds{color:var(--muted);font-size:14px}
.edrow .pr{font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.5rem);font-weight:560;white-space:nowrap;text-align:right}
.edrow .pr small{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400}
@media(max-width:800px){
 .edrow{grid-template-columns:44px 1fr auto;gap:12px}
 .edrow .ds{display:none}
}

/* ---------- kroky: editorial čísla ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:step;border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink)}
@media(max-width:960px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:transparent;border:none;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);border-radius:0;padding:30px 26px 34px;position:relative;transition:.25s}
.step:hover{background:var(--card)}
.step::before{counter-increment:step;content:"(0" counter(step) ")";font-family:var(--font-display);font-style:italic;font-size:1.15rem;font-weight:480;color:var(--gold-d);display:block;margin-bottom:16px}
.step h3{font-size:1.35rem;margin-bottom:10px;font-family:var(--font-display);font-weight:540}
.step p{color:var(--muted);font-size:14px;line-height:1.6}

/* ---------- o nás ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:36px}}
.about-grid .im{border-radius:0;overflow:hidden;border:1.5px solid var(--ink);box-shadow:10px 10px 0 var(--shadow-ink);position:relative}
.about-grid .im img{width:100%;height:100%;object-fit:cover}
.klist{list-style:none;display:flex;flex-direction:column;margin-top:22px;border-top:1px solid var(--line)}
.klist li{display:flex;gap:14px;align-items:baseline;font-size:15.5px;padding:13px 2px;border-bottom:1px solid var(--line)}
.klist li::before{content:"";flex:none;width:13px;height:13px;margin-top:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cg stroke='%232f6b53' stroke-width='3.4' stroke-linecap='round'%3E%3Ccircle cx='14.5' cy='37.5' r='5.6'/%3E%3Ccircle cx='33.5' cy='37.5' r='5.6'/%3E%3Cpath d='M18.6 33.6 34.8 7.4'/%3E%3Cpath d='M29.4 33.6 13.2 7.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- galerie: asymetrická ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.gal figure{border-radius:0;overflow:hidden;border:1.5px solid var(--ink);background:var(--soft);cursor:pointer;position:relative;margin:0}
.gal figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .6s}
.gal figure:hover img{transform:scale(1.06);filter:saturate(1.05)}
.gal figure:nth-child(6n+1){grid-column:span 7;aspect-ratio:16/10}
.gal figure:nth-child(6n+2){grid-column:span 5;aspect-ratio:4/5}
.gal figure:nth-child(6n+3){grid-column:span 4;aspect-ratio:1/1}
.gal figure:nth-child(6n+4){grid-column:span 8;aspect-ratio:16/9}
.gal figure:nth-child(6n+5){grid-column:span 5;aspect-ratio:4/5}
.gal figure:nth-child(6n+6){grid-column:span 7;aspect-ratio:16/10}
@media(max-width:700px){.gal figure{grid-column:span 12!important;aspect-ratio:4/3!important}}

/* ---------- pagehead (podstránky) ---------- */
.pagehead{background:var(--paper);border-bottom:1.5px solid var(--ink);padding:78px 0 54px;text-align:left;position:relative;overflow:hidden}
.pagehead h1{font-size:clamp(2.6rem,6.5vw,4.6rem);margin:14px 0 12px;letter-spacing:-.02em}
.pagehead p{color:var(--muted);max-width:560px;margin:0;font-size:1.05rem}
.pagehead .wrap{position:relative}
.pagehead::after{content:"";position:absolute;right:4%;bottom:-34px;width:180px;height:180px;opacity:.06;transform:rotate(-18deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cg stroke='%23141618' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='14.5' cy='37.5' r='5.6'/%3E%3Ccircle cx='33.5' cy='37.5' r='5.6'/%3E%3Cpath d='M18.6 33.6 34.8 7.4'/%3E%3Cpath d='M29.4 33.6 13.2 7.4'/%3E%3C/g%3E%3Ccircle cx='24' cy='26' r='2.1' fill='%23141618'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- CTA sekce: obří text ---------- */
.cta-ed{border-top:1.5px solid var(--ink);background:var(--ink);color:var(--paper);padding:90px 0;position:relative;overflow:hidden}
.cta-ed h2{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:500;line-height:1.02;color:var(--paper);margin-bottom:12px}
.cta-ed h2 em{font-style:italic;color:var(--gold-l)}
.cta-ed p{color:#a9adb1;max-width:460px;font-size:1.05rem;margin-bottom:34px}
.cta-ed .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta-ed .btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.cta-ed .big-scissors{position:absolute;right:-3%;top:50%;transform:translateY(-50%) rotate(-14deg);width:min(360px,32vw);height:min(360px,32vw);opacity:.08;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cg stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='14.5' cy='37.5' r='5.6'/%3E%3Ccircle cx='33.5' cy='37.5' r='5.6'/%3E%3Cpath d='M18.6 33.6 34.8 7.4'/%3E%3Cpath d='M29.4 33.6 13.2 7.4'/%3E%3C/g%3E%3Ccircle cx='24' cy='26' r='2.1' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#a9adb1;padding:70px 0 30px;margin-top:0;border-top:1.5px solid var(--ink)}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px}
@media(max-width:960px){.foot .cols{grid-template-columns:1fr;gap:28px}}
.foot .foot-h{font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:.26em;font-size:11px;color:var(--paper);margin-bottom:16px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.foot a{transition:.2s}
.foot a:hover{color:var(--gold-l)}
.foot .brand{color:#fff;font-size:23px}
.foot .brand .mark{color:var(--gold-l)}
.foot .brand .b2{color:var(--gold-l)}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.marq-in{animation:none}}

/* ---------- mobilní doladění ---------- */
@media(max-width:700px){
 .topbar{font-size:10.5px;letter-spacing:.08em}
 .topbar .wrap{height:38px;padding:0 18px}
 .topbar .r{gap:0}
 .brand{font-size:19px;gap:6px}
 .brand .dot{font-size:14px}
 .site .wrap{min-height:62px;padding-left:18px;padding-right:18px}
 .wrap,.narrow{padding:0 18px}
 .hero-kicker{font-size:10px;letter-spacing:.22em;gap:10px;flex-wrap:wrap;row-gap:4px}
 .hero-kicker::before{width:28px}
 .hero-split .col-txt{padding:40px 18px 42px}
 section{padding:64px 0}
 .pagehead{padding:48px 0 36px}
 .pagehead::after{font-size:96px;bottom:-16px}
 .cta-ed{padding:64px 0}
}
@media(max-width:420px){
 /* Na úzkých displejích se do lišty vejde jen telefon. */
 .topbar .wrap > div:first-child{display:none}
 .topbar .wrap{justify-content:center}
}

/* Ikony sociálních sítí v patičce a v kontaktech */
.foot-social{display:flex;gap:10px;margin-top:20px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1.5px solid rgba(255,255,255,.28);border-radius:50%;color:#fff;opacity:.8;transition:.2s}
.foot-social a:hover{background:var(--gold);border-color:var(--gold);opacity:1;transform:translateY(-2px)}
.kk-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.kk-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1.5px solid var(--line);border-radius:50%;color:var(--ink);transition:.2s}
.kk-social a:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-2px)}