/* ==========================================================================
   TESLIST — Design system 2026
   Nový vzhled dle projektu "Moderní vzhled Teslist.cz".
   Tento soubor se načítá POSLEDNÍ a přepisuje výchozí Bootstrap/Sandbox téma.
   Cílem je změnit pouze vzhled — veškerá funkčnost, třídy a JS hooky zůstávají.
   ========================================================================== */

:root {
  /* Barvy */
  --ts-bg:        #f3efe6;
  --ts-card:      #fbf8f2;
  --ts-card-alt:  #eeeadf;
  --ts-ink:       #14130f;
  --ts-accent:    #f4d23a;
  --ts-accent-ink:#4a4318;
  --ts-good:      #3f8f5c;
  --ts-mid:       #e2952e;
  --ts-bad:       #c0453a;
  --ts-muted:     #5c584e;
  --ts-faint:     #8c8779;
  --ts-on-dark:   #e6e2d6;
  --ts-on-dark-2: #b8b3a5;

  --ts-line:      rgba(20, 19, 16, 0.12);
  --ts-line-2:    rgba(20, 19, 16, 0.16);
  --ts-line-soft: rgba(20, 19, 16, 0.08);
  --ts-line-dark: rgba(243, 239, 230, 0.18);

  /* Rádiusy */
  --ts-r-sm:  10px;
  --ts-r-md:  14px;
  --ts-r-lg:  16px;
  --ts-r-xl:  18px;
  --ts-r-2xl: 20px;
  --ts-pill:  100px;

  /* Písma */
  --ts-font-display: 'Archivo', 'Urbanist', system-ui, sans-serif;
  --ts-font-body:    'General Sans', 'Urbanist', system-ui, sans-serif;
  --ts-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Stíny */
  --ts-shadow-sm: 0 4px 14px rgba(20, 19, 16, 0.06);
  --ts-shadow-md: 0 12px 30px rgba(20, 19, 16, 0.10);
  --ts-shadow-lg: 0 30px 70px rgba(20, 19, 16, 0.10);

  /* Bootstrap proměnné převedené na novou paletu */
  --bs-body-bg: #f3efe6;
  --bs-body-color: #14130f;
  --bs-body-font-family: 'General Sans', 'Urbanist', system-ui, sans-serif;
  --bs-primary: #14130f;
  --bs-primary-rgb: 20, 19, 16;
  --bs-link-color: #14130f;
  --bs-link-hover-color: #5c584e;
  --bs-border-color: rgba(20, 19, 16, 0.12);
  --bs-border-radius: 14px;
  --bs-secondary: #5c584e;
  --bs-success: #3f8f5c;
  --bs-warning: #e2952e;
  --bs-danger: #c0453a;
  --bs-info: #14130f;
  --bs-light: #fbf8f2;
  --bs-dark: #14130f;
}

/* --------------------------------------------------------------------------
   1. Základ
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  background: var(--ts-bg);
  color: var(--ts-ink);
  font-family: var(--ts-font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--ts-accent); color: var(--ts-ink); }

/* --------------------------------------------------------------------------
   2. Typografie
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--ts-font-display);
  color: var(--ts-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: pretty;
}

h1, .h1 { font-size: clamp(2.2rem, 4.6vw, 3.25rem); letter-spacing: -0.03em; }
h2, .h2 { font-size: clamp(1.7rem, 3vw, 2.125rem); }
h3, .h3 { font-size: clamp(1.25rem, 2vw, 1.375rem); font-weight: 700; letter-spacing: -0.01em; }
h4, .h4 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; }
h5, .h5 { font-size: 1.0625rem; font-weight: 700; }
h6, .h6 { font-size: 0.9375rem; font-weight: 700; }

.display-1 { font-size: clamp(2.8rem, 7vw, 4.75rem); line-height: 0.98; letter-spacing: -0.03em; }
.display-2 { font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 0.99; letter-spacing: -0.03em; }
.display-3 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.0;  letter-spacing: -0.03em; }
.display-4 { font-size: clamp(2rem, 4.2vw, 2.75rem); letter-spacing: -0.02em; }
.display-5 { font-size: clamp(1.75rem, 3.4vw, 2.375rem); letter-spacing: -0.02em; }
.display-6 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); letter-spacing: -0.02em; }

p { color: var(--ts-muted); }
h1 + p, h2 + p, h3 + p { color: var(--ts-muted); }

.lead {
  font-family: var(--ts-font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ts-muted);
}

.text-muted, .text-secondary { color: var(--ts-faint) !important; }
.text-primary { color: var(--ts-ink) !important; }
.text-dark    { color: var(--ts-ink) !important; }
.text-success { color: var(--ts-good) !important; }
.text-warning { color: var(--ts-mid) !important; }
.text-danger  { color: var(--ts-bad) !important; }
.text-info    { color: var(--ts-muted) !important; }

/* Gradientové texty z původního tématu → plná inkoustová/akcentová barva */
.text-gradient,
.text-gradient.gradient-1, .text-gradient.gradient-2, .text-gradient.gradient-3,
.text-gradient.gradient-4, .text-gradient.gradient-5, .text-gradient.gradient-6,
.text-gradient.gradient-7, .text-gradient.gradient-8, .text-gradient.gradient-9 {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ts-ink) !important;
}

/* Popisky sekcí — mono, prostrkané */
.text-uppercase.fs-15, .text-uppercase.fs-16, .text-uppercase.text-muted,
h2.fs-15.text-uppercase, .widget-title {
  font-family: var(--ts-font-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.widget-title {
  font-size: 0.8125rem !important;
  text-transform: uppercase;
  color: var(--ts-ink) !important;
  font-weight: 700;
}

a {
  color: var(--ts-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
a:hover { color: var(--ts-muted); }
a.link-dark, a.link-inverse, .link-dark { color: var(--ts-ink); }
.nav-link, .dropdown-item, .btn, .navbar-brand a { text-decoration: none; }

/* Číselné údaje (ceny, km, SoH, VIN) monospace */
.price, .amount, .ts-mono, .ts-num,
.price .amount, .price ins, .amount ins {
  font-family: var(--ts-font-mono);
  font-weight: 700;
  color: var(--ts-ink);
  text-decoration: none;
}
.price ins, .amount ins { text-decoration: none; }
.price small, .amount small { font-weight: 500; color: var(--ts-faint); }

/* --------------------------------------------------------------------------
   3. Plochy a sekce
   -------------------------------------------------------------------------- */

.wrapper, section.wrapper { background: var(--ts-bg); }
.bg-light, .wrapper.bg-light, section.bg-light { background: var(--ts-bg) !important; }
.bg-white { background: var(--ts-card) !important; }
.bg-soft-primary, .bg-soft-blue, .bg-soft-violet, .bg-soft-leaf,
.bg-soft-aqua, .bg-soft-yellow, .bg-soft-fuchsia, .bg-soft-navy,
.bg-pale-primary, .bg-pale-blue, .bg-pale-violet, .bg-pale-leaf,
.bg-pale-aqua, .bg-pale-yellow, .bg-pale-fuchsia, .bg-pale-navy {
  background: var(--ts-card) !important;
  color: var(--ts-ink) !important;
}

.bg-dark, .bg-navy, .bg-primary {
  background: var(--ts-ink) !important;
  color: var(--ts-on-dark) !important;
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6 {
  color: var(--ts-bg) !important;
}
.bg-dark p, .bg-dark .lead, .bg-primary p, .bg-primary .lead { color: var(--ts-on-dark-2) !important; }

/* Barevné gradienty tématu → klidné plochy nové palety */
.gradient-1, .gradient-2, .gradient-3, .gradient-5, .gradient-7, .gradient-8, .gradient-9,
.bg-gradient-primary, .bg-gradient-blue, .bg-gradient-violet, .bg-gradient-purple {
  background: var(--ts-ink) !important;
  color: var(--ts-bg) !important;
}
.gradient-4, .gradient-6, .bg-gradient-yellow, .bg-gradient-orange, .bg-gradient-pink {
  background: var(--ts-accent) !important;
  color: var(--ts-ink) !important;
}

/* Fotopozadí s tmavými overlayi z původního tématu → čistý papírový podklad */
.image-wrapper.bg-image.bg-overlay,
.image-wrapper.bg-full.bg-image {
  background-image: none !important;
  background-color: var(--ts-card) !important;
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-xl);
  color: var(--ts-ink);
}
[class*="bg-overlay"]::before, [class*="bg-overlay"]::after { display: none !important; }
.image-wrapper.bg-image h1, .image-wrapper.bg-image h2,
.image-wrapper.bg-image h3, .image-wrapper.bg-image h4,
.image-wrapper.bg-image h5, .image-wrapper.bg-image h6 { color: var(--ts-ink) !important; }
.image-wrapper.bg-image p, .image-wrapper.bg-image .lead { color: var(--ts-muted) !important; }
.image-wrapper.bg-image .text-white,
.image-wrapper.bg-image .text-white * { color: var(--ts-ink) !important; }

/* Dekorativní tvary a puntíky starého tématu nemají v novém vzhledu místo */
.shape, .bg-dot, .rellax.shape, [class*="shape bg-"] { display: none !important; }

/* Vlnité "dividery" ze starého tématu */
.divider svg, .overflow-hidden > .divider { display: none !important; }

hr, .divider { border-color: var(--ts-line); opacity: 1; }

/* --------------------------------------------------------------------------
   4. Tlačítka
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--ts-font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0;
  border-radius: var(--ts-pill) !important;
  padding: 0.875rem 1.625rem;
  border-width: 1.5px;
  box-shadow: none !important;
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-transform: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--ts-ink); outline-offset: 2px; }

.btn-sm  { padding: 0.5625rem 1.125rem; font-size: 0.8125rem; }
.btn-lg  { padding: 1.0625rem 1.875rem; font-size: 0.9375rem; }

/* Téma přidává .rounded / .rounded-* na tlačítka — vždy chceme pilulku */
.btn.rounded, .btn.rounded-0, .btn.rounded-1, .btn.rounded-2,
.btn.rounded-3, .btn.rounded-4, .btn.rounded-pill {
  border-radius: var(--ts-pill) !important;
}
.btn.btn-circle { border-radius: 50% !important; }

/* Primární — inkoustová */
.btn-primary, .btn-dark, .btn-navy, .btn-blue, .btn-violet, .btn-purple,
.btn-gradient, .btn-gradient.gradient-1, .btn-gradient.gradient-2,
.btn-gradient.gradient-3, .btn-gradient.gradient-5, .btn-gradient.gradient-7,
.btn-gradient.gradient-8, .btn-gradient.gradient-9 {
  background: var(--ts-ink) !important;
  border-color: var(--ts-ink) !important;
  color: var(--ts-bg) !important;
}
.btn-primary:hover, .btn-dark:hover, .btn-navy:hover, .btn-blue:hover,
.btn-violet:hover, .btn-purple:hover, .btn-gradient:hover {
  background: #26241d !important;
  border-color: #26241d !important;
  color: var(--ts-bg) !important;
}

/* Akcentní — žlutá */
.btn-yellow, .btn-warning, .btn-accent,
.btn-gradient.gradient-4, .btn-gradient.gradient-6,
.btn-gradient.gradient-10 {
  background: var(--ts-accent) !important;
  border-color: var(--ts-accent) !important;
  color: var(--ts-ink) !important;
}
.btn-yellow:hover, .btn-warning:hover, .btn-accent:hover,
.btn-gradient.gradient-4:hover, .btn-gradient.gradient-6:hover {
  background: #e6c526 !important;
  border-color: #e6c526 !important;
  color: var(--ts-ink) !important;
}

/* Sekundární — outline */
.btn-outline-primary, .btn-outline-dark, .btn-outline-secondary,
.btn-outline-blue, .btn-outline-violet, .btn-outline-purple,
.btn-soft-primary, .btn-light, .btn-secondary {
  background: transparent !important;
  border-color: var(--ts-line-2) !important;
  color: var(--ts-ink) !important;
  font-weight: 600;
}
.btn-outline-primary:hover, .btn-outline-dark:hover, .btn-outline-secondary:hover,
.btn-outline-blue:hover, .btn-outline-violet:hover, .btn-outline-purple:hover,
.btn-soft-primary:hover, .btn-light:hover, .btn-secondary:hover {
  background: rgba(20, 19, 16, 0.06) !important;
  border-color: rgba(20, 19, 16, 0.32) !important;
  color: var(--ts-ink) !important;
}

.btn-success { background: var(--ts-good) !important; border-color: var(--ts-good) !important; color: #f3efe6 !important; }
.btn-danger, .btn-red { background: var(--ts-bad) !important; border-color: var(--ts-bad) !important; color: #f3efe6 !important; }
.btn-outline-danger { background: transparent !important; border-color: rgba(192,69,58,0.4) !important; color: var(--ts-bad) !important; }
.btn-outline-success { background: transparent !important; border-color: rgba(63,143,92,0.4) !important; color: var(--ts-good) !important; }

.btn:disabled, .btn.disabled {
  background: rgba(20, 19, 16, 0.08) !important;
  border-color: transparent !important;
  color: var(--ts-faint) !important;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

/* Ikonové "tlačítko" (jen dekorace u karet se zárukou apod.) */
.icon.btn.btn-circle, .btn-circle.pe-none {
  background: rgba(20, 19, 16, 0.06) !important;
  border-color: transparent !important;
  color: var(--ts-ink) !important;
  transform: none !important;
}
.icon.btn.btn-circle.btn-soft-leaf, .icon.btn.btn-circle.btn-soft-green {
  background: rgba(63, 143, 92, 0.14) !important; color: var(--ts-good) !important;
}
.icon.btn.btn-circle.btn-soft-red, .icon.btn.btn-circle.btn-soft-orange {
  background: rgba(226, 149, 46, 0.16) !important; color: #8a5c14 !important;
}
.counter { font-family: var(--ts-font-mono); font-weight: 700; letter-spacing: -0.01em; }

/* Kruhová tlačítka (šipky slideru, sociální ikony) */
.btn-circle {
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-circle.btn-sm { width: 2.375rem; height: 2.375rem; }
.btn-circle.btn-lg { width: 3.25rem; height: 3.25rem; }

/* Tlačítko na tmavém podkladu (lišty, tmavé panely) */
.ts-btn-on-dark {
  background: transparent !important;
  border-color: rgba(243, 239, 230, 0.24) !important;
  color: var(--ts-bg) !important;
  font-weight: 600;
}
.ts-btn-on-dark:hover {
  background: rgba(243, 239, 230, 0.1) !important;
  border-color: rgba(243, 239, 230, 0.45) !important;
  color: var(--ts-bg) !important;
}
.compare-bar-title { color: var(--ts-bg); font-weight: 600; font-size: 0.875rem; }

/* Na tmavém podkladu */
.bg-dark .btn-outline-primary, .bg-dark .btn-outline-dark, .bg-dark .btn-light,
.ts-dark .btn-outline-primary, .ts-dark .btn-outline-dark, .ts-dark .btn-light {
  border-color: var(--ts-line-dark) !important;
  color: var(--ts-bg) !important;
}
.bg-dark .btn-outline-primary:hover, .ts-dark .btn-outline-primary:hover {
  background: rgba(243, 239, 230, 0.1) !important;
  color: var(--ts-bg) !important;
}

/* --------------------------------------------------------------------------
   5. Karty
   -------------------------------------------------------------------------- */

.card {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md);
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card.shadow-sm, .card.shadow-lg, .card.shadow { box-shadow: none !important; }
.shadow-lg { box-shadow: none !important; }
.shadow-sm { box-shadow: none !important; }

a > .card:hover, .card.ts-hover:hover, .card-hover:hover {
  border-color: rgba(20, 19, 16, 0.3);
}

.card-body { padding: 1.5rem; }
.card-header, .card-footer { background: transparent; border-color: var(--ts-line); }

.card.bg-dark, .card.bg-primary, .card.gradient-1, .card.gradient-2,
.card.gradient-3, .card.gradient-5 {
  border-color: transparent;
  color: var(--ts-on-dark);
}
.card.gradient-4, .card.gradient-6 { border-color: transparent; color: var(--ts-ink); }

.rounded, .rounded-3, .rounded-4 { border-radius: var(--ts-r-md) !important; }
.rounded-pill { border-radius: var(--ts-pill) !important; }
.border, .border-1 { border-color: var(--ts-line) !important; }

/* --------------------------------------------------------------------------
   6. Formuláře
   -------------------------------------------------------------------------- */

.form-label, label.form-label, .form-check-label {
  font-family: var(--ts-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ts-ink);
  margin-bottom: 0.5rem;
  text-transform: none;
  letter-spacing: 0;
}

.form-control, .form-select, textarea.form-control, input.form-control,
input[type="text"].form-control, input[type="email"].form-control,
input[type="number"].form-control, input[type="password"].form-control {
  background: #fff;
  border: 1.5px solid var(--ts-line-2);
  border-radius: var(--ts-r-sm);
  padding: 0.875rem 1rem;
  font-family: var(--ts-font-body);
  font-size: 0.9375rem;
  color: var(--ts-ink);
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}
.form-control::placeholder { color: var(--ts-faint); }
.form-control:focus, .form-select:focus {
  border-color: var(--ts-ink);
  background: #fff;
  color: var(--ts-ink);
  outline: none;
}

/* Číselná / datová pole monospace */
input[type="number"].form-control,
.form-control.ts-mono,
input[name*="vin"], input[id*="vin"], input[id*="VIN"],
input[name*="cena"], input[name*="km"], input[name*="rok"] {
  font-family: var(--ts-font-mono);
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235c584e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 11px;
  padding-right: 2.75rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Plovoucí popisky */
.form-floating > .form-control, .form-floating > .form-select {
  height: auto;
  min-height: 3.5rem;
  padding: 1.4rem 1rem 0.5rem;
}
.form-floating > label {
  padding: 1rem;
  color: var(--ts-faint);
  font-size: 0.9375rem;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: var(--ts-faint);
  opacity: 1;
  transform: scale(0.8) translateY(-0.5rem) translateX(0.15rem);
}

.input-group-text {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line-2);
  color: var(--ts-muted);
  border-radius: var(--ts-r-sm);
  font-family: var(--ts-font-mono);
  font-size: 0.875rem;
}

.form-check-input {
  border: 1.5px solid var(--ts-line-2);
  background-color: #fff;
  width: 1.1em; height: 1.1em;
  margin-top: 0.22em;
  box-shadow: none !important;
}
.form-check-input:checked {
  background-color: var(--ts-ink);
  border-color: var(--ts-ink);
}
.form-switch .form-check-input:checked { background-color: var(--ts-good); border-color: var(--ts-good); }

/* Range slider (filtry) */
input[type="range"] { accent-color: var(--ts-ink); }
.range-slider-container { background: rgba(20, 19, 16, 0.1) !important; height: 4px !important; border-radius: 2px !important; }
.range-track { background: var(--ts-accent) !important; height: 4px !important; border-radius: 2px !important; }
.range-inputs, .range-inputs input[type="range"] { height: 4px !important; }
.range-inputs input[type="range"]::-webkit-slider-thumb {
  height: 18px !important; width: 18px !important;
  background: var(--ts-ink) !important;
  border: 3px solid var(--ts-bg) !important;
  box-shadow: 0 2px 8px rgba(20, 19, 16, 0.25) !important;
}
.range-inputs input[type="range"]::-moz-range-thumb {
  background: var(--ts-ink) !important;
  border: 3px solid var(--ts-bg) !important;
  box-shadow: 0 2px 8px rgba(20, 19, 16, 0.25) !important;
}
.range-values { font-family: var(--ts-font-mono); font-size: 0.8125rem; color: var(--ts-muted); }
.range-limits { font-family: var(--ts-font-mono); font-size: 0.75rem; color: var(--ts-faint); }

/* --------------------------------------------------------------------------
   7. Odznaky (badge) a chipy
   -------------------------------------------------------------------------- */

.badge {
  font-family: var(--ts-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.4375rem 0.8125rem;
  border-radius: var(--ts-pill) !important;
  text-transform: uppercase;
  line-height: 1.2;
}
.badge.bg-primary, .badge.bg-dark, .badge.bg-navy, .badge.bg-blue, .badge.bg-violet {
  background: var(--ts-ink) !important; color: var(--ts-bg) !important;
}
.badge.bg-success, .badge.bg-green, .badge.bg-leaf { background: var(--ts-good) !important; color: #f3efe6 !important; }
.badge.bg-warning, .badge.bg-yellow, .badge.bg-orange { background: var(--ts-mid) !important; color: #fff !important; }
.badge.bg-danger, .badge.bg-red { background: var(--ts-bad) !important; color: #f3efe6 !important; }
.badge.bg-info, .badge.bg-aqua, .badge.bg-sky { background: var(--ts-accent) !important; color: var(--ts-ink) !important; }
.badge.bg-secondary, .badge.bg-gray { background: transparent !important; border: 1.5px solid var(--ts-line-2); color: var(--ts-muted) !important; }
.badge.bg-light, .badge.bg-white {
  background: transparent !important;
  border: 1.5px solid var(--ts-line-2);
  color: var(--ts-muted) !important;
}
.badge.bg-pale-primary, .badge.bg-pale-blue, .badge.bg-pale-violet,
.badge.bg-soft-primary, .badge.bg-soft-blue {
  background: rgba(20, 19, 16, 0.06) !important; color: var(--ts-ink) !important;
}

/* Sémantické odznaky nového designu */
.badge.ts-badge-ink     { background: var(--ts-ink) !important;    color: var(--ts-bg) !important; }
.badge.ts-badge-accent  { background: var(--ts-accent) !important; color: var(--ts-ink) !important; }
.badge.ts-badge-good    { background: var(--ts-good) !important;   color: #f3efe6 !important; }
.badge.ts-badge-mid     { background: var(--ts-mid) !important;    color: #fff !important; }
.badge.ts-badge-bad     { background: var(--ts-bad) !important;    color: #f3efe6 !important; }
.badge.ts-badge-outline {
  background: transparent !important;
  border: 1.5px solid var(--ts-line-2);
  color: var(--ts-muted) !important;
  font-weight: 600;
}
.badge i { font-size: 0.8125rem; vertical-align: -1px; }

/* Zbylé odstíny původního tématu */
.badge[class*="bg-pale-"], .badge[class*="bg-soft-"] {
  background: rgba(20, 19, 16, 0.06) !important;
  color: var(--ts-ink) !important;
}
.badge[class*="text-"] { color: inherit; }

/* Řádek odznaků na kartě vozu */
.ts-car-card__badges, ul.post-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ts-car-card__badges .badge, ul.post-meta .badge { margin: 0 !important; }

/* Odkaz "Zobrazit vše →" */
.ts-link-more {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ts-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Chip / filtrovací štítek */
.ts-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ts-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 0.9375rem;
  border-radius: var(--ts-pill);
  border: 1.5px solid var(--ts-line-2);
  background: transparent;
  color: var(--ts-muted);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.ts-chip:hover { border-color: rgba(20, 19, 16, 0.32); color: var(--ts-ink); }
.ts-chip.is-active, .ts-chip[aria-pressed="true"] {
  background: var(--ts-accent);
  border-color: rgba(20, 19, 16, 0.4);
  color: var(--ts-ink);
}

/* Chipy aktivních filtrů (Alpine výpis) */
.active-filters-bar {
  background: var(--ts-card) !important;
  border: 1.5px solid var(--ts-line) !important;
  border-radius: var(--ts-r-md) !important;
  padding: 1rem 1.25rem !important;
}
.filter-chip {
  background: var(--ts-accent) !important;
  border: 1.5px solid rgba(20, 19, 16, 0.4) !important;
  color: var(--ts-ink) !important;
  border-radius: var(--ts-pill) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 0.9375rem !important;
}
.filter-chip:hover { background: #e6c526 !important; color: var(--ts-ink) !important; }
.filter-chip button { color: var(--ts-ink); opacity: 0.6; }
.filter-chip button:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   8. Navigace
   -------------------------------------------------------------------------- */

.navbar, .navbar.transparent, .navbar-light {
  background: rgba(243, 239, 230, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20, 19, 16, 0.1);
  padding: 0;
}
header.wrapper { background: transparent; }

.ts-topbar {
  background: var(--ts-ink);
  color: var(--ts-bg);
  font-family: var(--ts-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 0.625rem 1rem;
}
.ts-topbar a { color: var(--ts-accent); font-weight: 600; }

.navbar .container { min-height: 76px; }

.navbar-brand { font-family: var(--ts-font-display); }
.ts-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ts-font-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ts-ink) !important;
  text-decoration: none;
  line-height: 1;
}
.ts-logo__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ts-accent);
  display: inline-block;
}

.navbar-nav .nav-link, .nav-link {
  font-family: var(--ts-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ts-muted);
  letter-spacing: 0;
  text-transform: none;
  padding: 0.5rem 0;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active, .nav-link:hover { color: var(--ts-ink); }
.navbar-nav > .nav-item { margin: 0 0.75rem; }

.dropdown-menu {
  background: #fff;
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md);
  box-shadow: var(--ts-shadow-md);
  padding: 0.5rem;
  margin-top: 0.5rem;
}
.dropdown-item {
  font-family: var(--ts-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ts-ink);
  border-radius: 8px;
  padding: 0.625rem 0.75rem;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(20, 19, 16, 0.06);
  color: var(--ts-ink);
}
.dropdown-header, h6.dropdown-header {
  font-family: var(--ts-font-mono);
  font-size: 0.6875rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ts-faint) !important;
  font-weight: 600;
  padding: 0.75rem 0.75rem 0.5rem;
}

.mega-menu, .dropdown-mega .dropdown-menu {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-lg);
  box-shadow: var(--ts-shadow-md);
  padding: 1.5rem;
}
.mega-menu-content { padding: 0; }

.language-select .dropdown-toggle { font-family: var(--ts-font-mono); font-size: 0.8125rem; font-weight: 600; }

/* Lepící lišta */
.ts-header { position: relative; z-index: 60; }
.ts-nav {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Pilulková tlačítka v liště */
.ts-nav-actions { gap: 0.625rem; }
.ts-nav-actions .nav-item { margin: 0; }
.ts-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--ts-line-2);
  border-radius: var(--ts-pill);
  padding: 0.5rem 1rem !important;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ts-ink);
  background: transparent;
  line-height: 1.4;
  white-space: nowrap;
}
.ts-nav-pill:hover { background: rgba(20, 19, 16, 0.06); color: var(--ts-ink); }
.ts-nav-pill--ghost { font-family: var(--ts-font-mono); border-color: transparent; }
.ts-nav-pill--ghost:hover { border-color: var(--ts-line-2); }

.ts-dropdown-danger { color: var(--ts-bad) !important; width: 100%; text-align: left; background: transparent; border: 0; }
.ts-dropdown-danger:hover { background: rgba(192, 69, 58, 0.1) !important; color: var(--ts-bad) !important; }

/* V dropdownu s odkazy na jazyky srovnáme vlaječky */
.language-select .dropdown-item img { border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* Offcanvas mobilní navigace */
.offcanvas, .offcanvas-nav { background: var(--ts-card); color: var(--ts-ink); }
.offcanvas-header { border-bottom: 1.5px solid var(--ts-line); }
.offcanvas-header h3 { color: var(--ts-ink) !important; font-family: var(--ts-font-display); }
.offcanvas .btn-close, .offcanvas .btn-close-white { filter: none; opacity: 0.6; }
.offcanvas-footer { border-top: 1.5px solid var(--ts-line); padding-top: 1rem; }
.offcanvas .navbar-nav .nav-link { padding: 0.625rem 0; font-size: 1rem; }

.hamburger span, .hamburger span::before, .hamburger span::after { background: var(--ts-ink) !important; }

/* --------------------------------------------------------------------------
   9. Modály
   -------------------------------------------------------------------------- */

.modal-content {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-lg);
  box-shadow: var(--ts-shadow-lg);
  color: var(--ts-ink);
}
.modal-header { border-bottom: 1.5px solid var(--ts-line); padding: 1.5rem 1.75rem; }
.modal-body   { padding: 1.75rem; }
.modal-footer { border-top: 1.5px solid var(--ts-line); padding: 1.25rem 1.75rem; }
.modal-title  { font-family: var(--ts-font-display); font-weight: 700; letter-spacing: -0.01em; }
.modal-backdrop.show { background: rgba(20, 19, 16, 0.45); opacity: 1; }
.btn-close { box-shadow: none !important; opacity: 0.55; }
.btn-close:hover { opacity: 1; }
.modal-body > .btn-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; }
.modal-body { position: relative; }

/* Oddělovač "nebo využijte e-mail" */
.ts-divider, .divider-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1.5rem 0;
  font-size: 0.75rem;
  color: var(--ts-faint);
  text-align: center;
}
.ts-divider::before, .ts-divider::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--ts-line);
}
.ts-divider span { white-space: nowrap; }

/* Přihlášení přes Google */
.ts-btn-google {
  background: #fff !important;
  margin-bottom: 0.25rem;
}
.ts-btn-google i { font-size: 1.0625rem; vertical-align: -2px; margin-right: 4px; }

/* Přepínač viditelnosti hesla */
.password-field { position: relative; }
.password-toggle {
  position: absolute;
  top: 50%; right: 1rem;
  transform: translateY(-50%);
  color: var(--ts-faint);
  cursor: pointer;
  z-index: 3;
}
.form-control.is-invalid { border-color: var(--ts-bad); background-image: none; }

/* --------------------------------------------------------------------------
   10. Tabulky
   -------------------------------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  color: var(--ts-ink);
  border-color: var(--ts-line);
  font-size: 0.9375rem;
}
.table > thead th {
  font-family: var(--ts-font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ts-faint);
  font-weight: 600;
  border-bottom: 1.5px solid var(--ts-line);
  padding: 0.875rem 1rem;
}
.table > tbody td {
  padding: 0.875rem 1rem;
  border-color: var(--ts-line-soft);
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(20, 19, 16, 0.025); color: var(--ts-ink); }
.table-hover > tbody > tr:hover > * { background: rgba(20, 19, 16, 0.04); color: var(--ts-ink); }

/* Záložky (detail vozu) */
.nav-tabs {
  border-bottom: 1.5px solid var(--ts-line);
  gap: 0.25rem;
}
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.875rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ts-faint);
  background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--ts-ink); border-bottom-color: var(--ts-line-2); }
.nav-tabs .nav-link.active {
  color: var(--ts-ink);
  background: transparent;
  border-bottom-color: var(--ts-ink);
}
.nav-tabs .nav-link i { margin-right: 6px; }
.tab-content { font-size: 0.9375rem; line-height: 1.7; color: var(--ts-muted); }

/* Tabulky parametrů: hodnota vpravo monospace */
.tab-content .table td:first-child { color: var(--ts-faint); font-size: 0.875rem; width: 42%; }
.tab-content .table td:last-child  { font-family: var(--ts-font-mono); font-weight: 600; color: var(--ts-ink); }

/* Mřížka specifikací (nový vzor z designu) */
.ts-specs {
  display: grid;
  gap: 1.5px;
  background: var(--ts-line);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.ts-specs__item { background: var(--ts-card); padding: 1rem 1.25rem; }
.ts-specs__label { font-size: 0.75rem; color: var(--ts-faint); margin-bottom: 4px; }
.ts-specs__value { font-family: var(--ts-font-mono); font-size: 0.9375rem; font-weight: 600; color: var(--ts-ink); }

/* --------------------------------------------------------------------------
   11. Upozornění (alerts)
   -------------------------------------------------------------------------- */

.alert {
  border-radius: var(--ts-r-md);
  border-width: 1.5px;
  font-size: 0.875rem;
  padding: 1rem 1.25rem;
}
.alert-success, .alert-green {
  background: rgba(63, 143, 92, 0.12); border-color: rgba(63, 143, 92, 0.35); color: #245c39;
}
.alert-warning, .alert-yellow {
  background: rgba(226, 149, 46, 0.12); border-color: rgba(226, 149, 46, 0.35); color: #7a5216;
}
.alert-danger, .alert-red {
  background: rgba(192, 69, 58, 0.10); border-color: rgba(192, 69, 58, 0.30); color: #7a2b22;
}
.alert-info, .alert-primary, .alert-blue, .alert-light, .alert-secondary {
  background: var(--ts-card); border-color: var(--ts-line); color: var(--ts-muted);
}

/* Toastify — sjednocení s paletou */
.toastify {
  background: var(--ts-ink) !important;
  color: var(--ts-bg) !important;
  border-radius: var(--ts-pill) !important;
  font-family: var(--ts-font-body) !important;
  font-weight: 600;
  box-shadow: var(--ts-shadow-md) !important;
}

/* --------------------------------------------------------------------------
   12. Stránkování, breadcrumb, accordion
   -------------------------------------------------------------------------- */

.pagination { gap: 0.5rem; }
.page-item .page-link, .pagination a, .pagination span.page-link {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ts-pill);
  border: 1.5px solid var(--ts-line-2);
  background: transparent;
  color: var(--ts-ink);
  font-family: var(--ts-font-mono);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0;
}
.page-item.active .page-link, .pagination .active > .page-link {
  background: var(--ts-ink);
  border-color: var(--ts-ink);
  color: var(--ts-bg);
}
.page-item.disabled .page-link { opacity: 0.4; }
.page-link:hover { background: rgba(20, 19, 16, 0.06); color: var(--ts-ink); }

.ts-pagination-wrap {
  border-top: 1.5px solid var(--ts-line);
  padding-top: 2rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.breadcrumb {
  font-family: var(--ts-font-mono);
  font-size: 0.8125rem;
  color: var(--ts-faint);
  background: transparent;
  padding: 0;
}
.breadcrumb a, .breadcrumb-item a { color: var(--ts-faint); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ts-faint); content: "/"; }

.accordion-item {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.accordion-button {
  background: transparent;
  color: var(--ts-ink);
  font-family: var(--ts-font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) { background: transparent; color: var(--ts-ink); }
.accordion-body { padding: 0 1.5rem 1.25rem; color: var(--ts-muted); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   13. Ikony a seznamy
   -------------------------------------------------------------------------- */

.icon-list.bullet-bg .bullet-soft-primary, .icon-list .bullet-soft-primary,
.icon-list.bullet-bg i {
  background: rgba(20, 19, 16, 0.06) !important;
  color: var(--ts-ink) !important;
}
.icon-list.bullet-bg .bullet-soft-green, .icon-list .bullet-soft-green {
  background: rgba(63, 143, 92, 0.14) !important; color: var(--ts-good) !important;
}
.icon-list li { color: var(--ts-muted); }
.icon-list.bullet-bg i { border-radius: 50%; }

.avatar, .avatar.bg-gradient-pink, .avatar.gradient-4, .avatar.gradient-6 {
  background: var(--ts-accent) !important;
  color: var(--ts-ink) !important;
  font-family: var(--ts-font-mono);
  font-weight: 700;
  border-radius: var(--ts-pill) !important;
}
.avatar.bg-dark, .avatar.gradient-1, .avatar.gradient-2 {
  background: var(--ts-ink) !important; color: var(--ts-bg) !important;
}

.progress { background: rgba(20, 19, 16, 0.1); border-radius: var(--ts-pill); height: 6px; }
.progress-bar { background: var(--ts-accent); border-radius: var(--ts-pill); }

/* --------------------------------------------------------------------------
   14. Nové komponenty designu
   -------------------------------------------------------------------------- */

/* Sekční popisek */
.ts-eyebrow {
  font-family: var(--ts-font-mono);
  font-size: 0.75rem;
  color: var(--ts-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: block;
}

/* Pilulka nad hero */
.ts-pill-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ts-card);
  border: 1.5px solid rgba(20, 19, 16, 0.14);
  border-radius: var(--ts-pill);
  padding: 0.5rem 1rem;
  font-family: var(--ts-font-mono);
  font-size: 0.75rem;
  color: var(--ts-muted);
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
}
.ts-pill-note:hover { border-color: rgba(20, 19, 16, 0.3); color: var(--ts-ink); }
.ts-pill-note::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ts-accent);
}

/* Zvýrazněné slovo v nadpisu */
.ts-mark { background: var(--ts-accent); padding: 0 8px; border-radius: 6px; }

/* Tmavý panel */
.ts-dark {
  background: var(--ts-ink);
  color: var(--ts-on-dark);
  border-radius: var(--ts-r-2xl);
}
.ts-dark h1, .ts-dark h2, .ts-dark h3, .ts-dark h4 { color: var(--ts-bg); }
.ts-dark p { color: var(--ts-on-dark-2); }
.ts-dark .ts-eyebrow { color: var(--ts-faint); }
.ts-dark a { color: var(--ts-accent); }

/* Panel / obecná karta v novém stylu */
.ts-panel {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-lg);
  padding: 2rem;
}
.ts-panel--accent { background: var(--ts-accent); border-color: transparent; color: var(--ts-ink); }
.ts-panel--accent p { color: var(--ts-accent-ink); }

/* Bento dlaždice se statistikami */
.ts-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.ts-stat {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-lg);
  padding: 1.5rem;
}
.ts-stat__num { font-family: var(--ts-font-display); font-size: 2.25rem; font-weight: 800; line-height: 1; }
.ts-stat__label { font-size: 0.8125rem; color: var(--ts-muted); margin-top: 6px; }
.ts-stat--accent { background: var(--ts-accent); border-color: transparent; }
.ts-stat--accent .ts-stat__label { color: var(--ts-accent-ink); }
.ts-stat--dark { background: var(--ts-ink); border-color: transparent; }
.ts-stat--dark .ts-stat__num { color: var(--ts-bg); }
.ts-stat--dark .ts-stat__label { color: var(--ts-on-dark-2); }

/* SoH gauge */
.ts-gauge { display: inline-flex; align-items: center; gap: 0.875rem; }
.ts-gauge__value { font-family: var(--ts-font-mono); font-size: 1.25rem; font-weight: 700; color: var(--ts-ink); }
.ts-gauge__label { font-size: 0.8125rem; color: var(--ts-muted); margin-top: 2px; }
.ts-gauge__note  { font-size: 0.75rem; color: var(--ts-faint); margin-top: 4px; }
.ts-gauge svg circle { transition: stroke-dashoffset 0.6s ease; }
.ts-gauge--lg { gap: 1.25rem; }
.ts-gauge--lg .ts-gauge__value { font-size: 1.75rem; }

/* Hero domovské stránky */
.ts-hero { padding: 5rem 0 1rem; }
.ts-hero__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.ts-hero__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.375rem;
}
.ts-hero__points li {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ts-muted);
}
.ts-hero__points li::before { content: "✓"; margin-right: 6px; color: var(--ts-good); }
.ts-hero__stats { display: grid; gap: 1rem; }

@media (max-width: 991.98px) {
  .ts-hero { padding: 3rem 0 0; }
  .ts-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ts-hero__stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* Partneři */
.ts-partners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.ts-partner {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md);
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ts-partner:hover { border-color: rgba(20, 19, 16, 0.3); transform: translateY(-2px); }
.ts-partner__img { max-height: 52px; max-width: 100%; width: auto; object-fit: contain; border-radius: 0; }
.ts-partner__img--dark { background: var(--ts-ink); padding: 8px 10px; border-radius: 8px; }

/* Odznak SoH na fotce vozu */
.ts-soh-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(251, 248, 242, 0.92);
  border-radius: var(--ts-pill);
  padding: 5px 10px 5px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ts-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ts-ink);
  backdrop-filter: blur(6px);
}
.ts-warranty-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--ts-good);
  color: var(--ts-bg);
  font-family: var(--ts-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--ts-pill);
  letter-spacing: 0.02em;
}

/* Karta vozu */
.ts-car-card {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ts-car-card:hover { border-color: rgba(20, 19, 16, 0.3); transform: translateY(-2px); }
.ts-car-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--ts-card-alt); overflow: hidden; }
.ts-car-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-car-card__body { padding: 1.125rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.ts-car-card__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--ts-font-mono); font-size: 0.75rem; color: var(--ts-faint); margin-bottom: 6px;
}
.ts-car-card__title {
  font-family: var(--ts-font-display); font-size: 1.1875rem; font-weight: 700;
  letter-spacing: -0.01em; margin: 0 0 8px; line-height: 1.25;
}
.ts-car-card__title a { color: var(--ts-ink); text-decoration: none; }
.ts-car-card__sub { font-size: 0.8125rem; color: var(--ts-muted); margin-bottom: 1rem; }
.ts-car-card__foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1.5px solid var(--ts-line-soft); padding-top: 0.875rem;
}
.ts-car-card__price { font-family: var(--ts-font-mono); font-size: 1.125rem; font-weight: 700; color: var(--ts-ink); }
.ts-car-card__price small { display: block; font-size: 0.75rem; font-weight: 500; color: var(--ts-faint); }
.ts-car-card__more { font-size: 0.8125rem; color: var(--ts-faint); white-space: nowrap; }

/* Vlaječky TOP / NOVÉ na fotce */
.ts-flag {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--ts-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: var(--ts-pill);
  z-index: 2;
}
.ts-flag--top { background: var(--ts-ink); color: var(--ts-bg); }
.ts-flag--new { background: var(--ts-accent); color: var(--ts-ink); }

/* Ovládací prvky nad fotkou */
.ts-media-btn {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(251, 248, 242, 0.92);
  backdrop-filter: blur(6px);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-pill);
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ts-ink);
  cursor: pointer;
  line-height: 1.3;
  transition: background 0.15s ease;
}
.ts-media-btn:hover { background: var(--ts-accent); border-color: var(--ts-accent); }
.ts-media-btn.active, .ts-media-btn.is-active {
  background: var(--ts-ink); border-color: var(--ts-ink); color: var(--ts-bg);
}
.ts-media-chip {
  position: absolute;
  bottom: 12px; left: 12px;
  z-index: 2;
  background: rgba(20, 19, 16, 0.82);
  backdrop-filter: blur(6px);
  color: var(--ts-bg);
  font-family: var(--ts-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--ts-pill);
}

.ts-car-card__place {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--ts-faint);
  margin-bottom: 0.875rem;
}
.ts-car-card__place img { border-radius: 2px; }

/* Upozornění v novém stylu */
.ts-notice {
  border-radius: 12px;
  border: 1.5px solid;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}
.ts-notice--good { background: rgba(63, 143, 92, 0.12); border-color: rgba(63, 143, 92, 0.35); color: #245c39; }
.ts-notice--warn { background: rgba(226, 149, 46, 0.12); border-color: rgba(226, 149, 46, 0.35); color: #7a5216; }
.ts-notice--bad  { background: rgba(192, 69, 58, 0.10); border-color: rgba(192, 69, 58, 0.30); color: #7a2b22; }

/* Kroky 01 / 02 / 03 */
.ts-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.ts-step { background: var(--ts-card); border: 1.5px solid var(--ts-line); border-radius: var(--ts-r-lg); padding: 2rem; }
.ts-step__num { font-family: var(--ts-font-mono); font-size: 0.9375rem; color: var(--ts-faint); margin-bottom: 1.25rem; }
.ts-step h3 { font-size: 1.3125rem; margin: 0 0 10px; }
.ts-step p { font-size: 0.9375rem; line-height: 1.6; margin: 0; }
.ts-step--accent { background: var(--ts-accent); border-color: transparent; }
.ts-step--accent .ts-step__num { color: #5c4f10; }
.ts-step--accent p { color: var(--ts-accent-ink); }
.ts-step--dark { background: var(--ts-ink); border-color: transparent; }
.ts-step--dark h3 { color: var(--ts-bg); }
.ts-step--dark p { color: var(--ts-on-dark-2); }

/* Právní / obsahové stránky s bočním obsahem */
.sticky-sidebar #sidebar-nav { border-left: 1.5px solid var(--ts-line); padding-left: 1.25rem; }
.sticky-sidebar #sidebar-nav .nav-link {
  padding: 0.4375rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ts-faint);
}
.sticky-sidebar #sidebar-nav .nav-link:hover { color: var(--ts-ink); }
.sticky-sidebar #sidebar-nav .nav-link.active { color: var(--ts-ink); font-weight: 700; }
.sticky-sidebar { top: 96px; }

/* ---- Statistiky ---- */
.ts-metric-switch {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.ts-metric-switch .ts-chip {
  font-family: var(--ts-font-body);
  padding: 0.625rem 1.25rem;
  background: transparent;
}
.ts-metric-switch__note { font-size: 0.8125rem; color: var(--ts-faint); }

.ts-stat-block {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-xl);
  padding: 2.25rem;
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.ts-stat-block__title {
  font-family: var(--ts-font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.ts-stat-block .stats-text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ts-muted);
  margin-bottom: 1.5rem;
}
.ts-stat-block .stats-text strong { color: var(--ts-ink); font-family: var(--ts-font-mono); font-weight: 700; }
.ts-stat-block__chart { min-width: 0; }
.chart-wrapper {
  background: var(--ts-bg);
  border-radius: var(--ts-r-md);
  padding: 1.25rem;
  min-height: 340px;
}

/* Odznak hodnocení (výborný / průměrný / slabý) */
.soh-indicator {
  display: inline-block;
  font-family: var(--ts-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: var(--ts-pill);
}
.soh-excellent { background: rgba(63, 143, 92, 0.16); color: #245c39; }
.soh-warning   { background: rgba(226, 149, 46, 0.18); color: #7a5216; }
.soh-poor      { background: rgba(192, 69, 58, 0.14); color: #7a2b22; }

/* Souhrnná čísla vedle grafu */
.stat-highlight {
  display: grid;
  gap: 1.5px;
  background: var(--ts-line);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md);
  overflow: hidden;
}
.stat-row {
  background: var(--ts-bg);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
}
.stat-label { font-size: 0.8125rem; color: var(--ts-faint); }
.stat-value { font-family: var(--ts-font-mono); font-size: 0.9375rem; font-weight: 700; color: var(--ts-ink); }

.legend-info {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md);
  padding: 1.25rem 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ts-muted);
  margin-top: 1.5rem;
}

@media (max-width: 991.98px) {
  .ts-stat-block { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.75rem; }
  .chart-wrapper { min-height: 300px; padding: 0.75rem; }
}

/* ---- Kalkulačky ---- */
.ts-calc {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-xl);
  padding: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.75rem;
}
.ts-calc__result {
  background: var(--ts-bg);
  border-radius: var(--ts-r-md);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ts-calc__value {
  font-family: var(--ts-font-display);
  font-size: clamp(2.75rem, 7vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ts-ink);
}
.ts-calc__caption { font-size: 0.875rem; color: var(--ts-muted); margin-top: 0.5rem; }
.ts-calc__note { font-size: 0.75rem; color: var(--ts-faint); line-height: 1.6; margin: 1.25rem 0 0; }
.ts-calc__result.is-filled .ts-calc__value { color: var(--ts-ink); }
.ts-calc .result:empty { display: none; }

/* Vložený obsah (iframe) */
.ts-embed {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-xl);
  overflow: hidden;
  line-height: 0;
}
.ts-embed iframe { display: block; width: 100%; border: 0; background: #fff; }

.ts-prose { max-width: 760px; }
.ts-prose p { font-size: 1rem; line-height: 1.75; margin-bottom: 1.25rem; }

.ts-figure { margin: 0; border-radius: var(--ts-r-lg); overflow: hidden; border: 1.5px solid var(--ts-line); }
.ts-figure img { width: 100%; display: block; border-radius: 0; }

@media (max-width: 767.98px) {
  .ts-calc { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.75rem; }
}

/* Odečet SoH ve formuláři inzerátu */
.ts-soh-readout {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--ts-bg);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-pill);
  padding: 0.5rem 1.125rem 0.5rem 0.5rem;
}
.ts-soh-readout__value { font-family: var(--ts-font-mono); font-size: 1.125rem; font-weight: 700; }
.ts-range-output {
  display: block;
  margin-top: 0.625rem;
  font-family: var(--ts-font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ts-ink);
}
.form-range { accent-color: var(--ts-ink); }

/* ---- Účet / garáž ---- */
.ts-account-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1.5px solid var(--ts-line);
  padding-bottom: 1.75rem;
  margin-bottom: 0.5rem;
}
.ts-connect-panel { padding: 3rem; text-align: center; margin-bottom: 2rem; }
.ts-connect-panel h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

/* Karta vozu v garáži */
.pricing.card { text-align: left; }
.pricing.card .card-title {
  font-family: var(--ts-font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.pricing .prices .price, .price-show {
  font-family: var(--ts-font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ts-ink);
  display: flex;
  gap: 10px;
  align-items: center;
}
.pricing .icon-list li { font-size: 0.875rem; margin-bottom: 0.5rem; }
.pricing .icon-list strong { font-family: var(--ts-font-mono); font-weight: 600; color: var(--ts-ink); }
.pricing .icon-list i { color: var(--ts-good); margin-right: 8px; }
.pricing .svg-inject.icon-svg { display: none; }

/* Chybová stránka */
.ts-404 {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-xl);
  padding: 4rem;
}
.ts-404__code {
  font-family: var(--ts-font-mono);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ts-accent);
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
}
@media (max-width: 767.98px) { .ts-404 { padding: 2rem; } }

/* Dvousloupcová sekce */
.ts-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.ts-split__list { display: flex; flex-direction: column; gap: 0.875rem; }
.ts-split--video { align-items: center; }

.ts-datacard {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md);
  padding: 1.25rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.ts-datacard__num {
  font-family: var(--ts-font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ts-ink);
  background: var(--ts-accent);
  border-radius: var(--ts-pill);
  padding: 5px 11px;
  flex-shrink: 0;
}
.ts-datacard h4 { font-size: 1rem; margin: 0 0 4px; }
.ts-datacard p { font-size: 0.875rem; line-height: 1.6; margin: 0; }

/* Video */
.ts-video {
  border-radius: var(--ts-r-lg);
  overflow: hidden;
  border: 1.5px solid var(--ts-line);
  background: var(--ts-ink);
}
.ts-video .plyr, .ts-video iframe { border-radius: var(--ts-r-lg); }

/* Přehled udělených práv */
.ts-rights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.ts-rights__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 12px;
  border: 1.5px solid;
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
}
.ts-rights__item strong { font-family: var(--ts-font-mono); font-size: 0.75rem; letter-spacing: 0.04em; }
.ts-rights__item--yes { background: rgba(63, 143, 92, 0.12); border-color: rgba(63, 143, 92, 0.35); color: #245c39; }
.ts-rights__item--no  { background: rgba(192, 69, 58, 0.10); border-color: rgba(192, 69, 58, 0.30); color: #7a2b22; }

/* Tmavý CTA panel uvnitř stránky */
.ts-cta-panel { padding: 4rem 3rem; text-align: center; }
.ts-cta-panel h2 { font-size: clamp(1.75rem, 3.4vw, 2.25rem); }
.ts-cta-panel p { max-width: 520px; margin-left: auto; margin-right: auto; }

@media (max-width: 991.98px) {
  .ts-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .ts-cta-panel { padding: 2.5rem 1.75rem; }
}

/* Bento mřížka "Proč právě my" */
.ts-bento {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}
.ts-bento__lead {
  grid-row: span 2;
  background: var(--ts-ink);
  border-radius: var(--ts-r-xl);
  padding: 2.5rem;
  display: flex;
  align-items: center;
}
.ts-bento__lead p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ts-on-dark) !important;
  margin: 0;
}
.ts-bento__tile {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-xl);
  padding: 1.75rem;
  display: flex;
  align-items: center;
}
.ts-bento__tile span {
  font-family: var(--ts-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.ts-bento__tile--accent { background: var(--ts-accent); border-color: transparent; }

@media (max-width: 991.98px) {
  .ts-bento { grid-template-columns: 1fr 1fr; }
  .ts-bento__lead { grid-row: auto; grid-column: span 2; padding: 1.75rem; }
}
@media (max-width: 575.98px) {
  .ts-bento { grid-template-columns: 1fr; }
  .ts-bento__lead { grid-column: auto; }
}

/* Prohlížečový rámeček (hero náhled) */
.ts-browser {
  background: var(--ts-card);
  border: 1.5px solid rgba(20, 19, 16, 0.14);
  border-radius: var(--ts-r-xl);
  padding: 14px;
  box-shadow: var(--ts-shadow-lg);
}
.ts-browser__bar { display: flex; align-items: center; gap: 8px; padding: 4px 8px 16px; }
.ts-browser__bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ts-browser__url { margin-left: 12px; font-family: var(--ts-font-mono); font-size: 0.75rem; color: var(--ts-faint); }
.ts-browser__screen { background: var(--ts-bg); border-radius: 12px; padding: 1.5rem; }

/* ---- Blog ---- */
.ts-postlist { display: flex; flex-direction: column; gap: 1.25rem; }
.ts-post {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px 1fr;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ts-post:hover { border-color: rgba(20, 19, 16, 0.3); transform: translateY(-2px); }
.ts-post__media { display: block; background: var(--ts-card-alt); min-height: 170px; }
.ts-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.ts-post__body { padding: 1.375rem 1.5rem; }
.ts-post__title {
  font-family: var(--ts-font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0.75rem 0 0.5rem;
}
.ts-post__title a { color: var(--ts-ink); text-decoration: none; }
.ts-post__title a:hover { text-decoration: underline; }
.ts-post__excerpt { font-size: 0.875rem; line-height: 1.6; color: var(--ts-muted); margin-bottom: 0.875rem; }
.ts-post__excerpt p { margin: 0; }
.ts-post__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  font-family: var(--ts-font-mono);
  font-size: 0.75rem;
  color: var(--ts-faint);
}
.ts-post__meta a { color: var(--ts-faint); text-decoration: none; }
.ts-post__meta i { margin-right: 4px; }

@media (max-width: 575.98px) {
  .ts-post { grid-template-columns: 1fr; }
  .ts-post__media { min-height: 0; aspect-ratio: 16/9; }
}

/* Článek */
.ts-article-head { max-width: 820px; }
.ts-article-head .badge { margin-bottom: 1.25rem; display: inline-block; }
.ts-article-title {
  font-family: var(--ts-font-display);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 1.25rem;
}
.ts-article {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-xl);
  overflow: hidden;
}
.ts-article__cover { margin: 0; background: var(--ts-card-alt); }
.ts-article__cover img { width: 100%; display: block; border-radius: 0; max-height: 460px; object-fit: cover; }
.ts-article__body { padding: 2.5rem; }
.ts-article__body .post-content { font-size: 1.0625rem; line-height: 1.75; color: var(--ts-ink); }
.ts-article__body .post-content h2 { font-size: 1.75rem; margin: 2.25rem 0 1rem; }
.ts-article__body .post-content h3 { font-size: 1.375rem; margin: 2rem 0 0.75rem; }
.ts-article__body .post-content p { color: var(--ts-ink); margin-bottom: 1.25rem; }
.ts-article__body .post-content img { border-radius: var(--ts-r-md); margin: 1.5rem 0; }
.ts-article__body .post-content blockquote {
  border-left: 3px solid var(--ts-accent);
  padding-left: 1.25rem;
  margin: 1.75rem 0;
  color: var(--ts-muted);
  font-style: normal;
}
.ts-article__body hr { margin: 3rem 0; }

/* Podobné články */
.ts-related {
  background: var(--ts-bg);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ts-related:hover { border-color: rgba(20, 19, 16, 0.3); transform: translateY(-2px); }
.ts-related__media { display: block; aspect-ratio: 16/10; background: var(--ts-card-alt); }
.ts-related__media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.ts-related__body { padding: 1.125rem 1.25rem; }
.ts-related__title { font-family: var(--ts-font-display); font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 0 0 0.5rem; }
.ts-related__title a { color: var(--ts-ink); text-decoration: none; }
.ts-related__excerpt { font-size: 0.8125rem; color: var(--ts-muted); margin-bottom: 0.75rem; }

/* Komentáře */
.ts-comment {
  background: var(--ts-bg);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.ts-comment__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 0.625rem;
}
.ts-comment__meta strong { font-size: 0.9375rem; font-weight: 700; color: var(--ts-ink); }
.ts-comment__meta span { font-family: var(--ts-font-mono); font-size: 0.75rem; color: var(--ts-faint); }
.ts-comment__body { font-size: 0.9375rem; line-height: 1.65; color: var(--ts-muted); }
.comment-form { border-top: 1.5px solid var(--ts-line); padding-top: 2rem; margin-top: 2rem; }

@media (max-width: 767.98px) {
  .ts-article__body { padding: 1.5rem; }
}

/* Postranní panel blogu */
.sidebar .widget { margin-bottom: 2.25rem; }
.sidebar .image-list { list-style: none; padding: 0; margin: 0; }
.sidebar .image-list li { display: flex; gap: 12px; margin-bottom: 1rem; }
.sidebar .image-list figure { flex: 0 0 72px; margin: 0; }
.sidebar .image-list img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; }
.sidebar .image-list h6 { font-size: 0.875rem; line-height: 1.4; font-weight: 600; margin-bottom: 4px; }
.sidebar .image-list h6 a { color: var(--ts-ink); text-decoration: none; }
.sidebar .image-list .post-meta { font-family: var(--ts-font-mono); font-size: 0.6875rem; color: var(--ts-faint); }
.sidebar .unordered-list { list-style: none; padding: 0; margin: 0; }
.sidebar .unordered-list li { margin-bottom: 0.5rem; font-size: 0.875rem; }
.sidebar .unordered-list a { color: var(--ts-muted); text-decoration: none; }
.sidebar .unordered-list a:hover { color: var(--ts-ink); }
.sidebar .tag-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.sidebar .tag-list .btn, .btn-soft-ash {
  background: transparent !important;
  border: 1.5px solid var(--ts-line-2) !important;
  color: var(--ts-muted) !important;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4375rem 0.875rem;
}
.sidebar .tag-list .btn:hover { border-color: rgba(20, 19, 16, 0.32) !important; color: var(--ts-ink) !important; }
.sidebar .search-form .form-control { border-radius: var(--ts-pill); }
.sidebar .search-form .form-floating > label { padding-left: 1.25rem; }

/* ---- Detail vozu ---- */
.ts-crumbs {
  font-family: var(--ts-font-mono);
  font-size: 0.8125rem;
  color: var(--ts-faint);
  margin-bottom: 1.75rem;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ts-crumbs a { color: var(--ts-faint); text-decoration: none; }
.ts-crumbs a:hover { color: var(--ts-ink); text-decoration: underline; }

/* Galerie vozu — velká fotka + pás náhledů jako v návrhu */
.ts-gallery .swiper-thumbs-container { height: auto !important; }
.ts-gallery .swiper:not(.swiper-thumbs) .swiper-slide figure {
  margin: 0;
  border-radius: var(--ts-r-lg);
  overflow: hidden;
  background: var(--ts-card-alt);
  aspect-ratio: 4 / 3;
}
.ts-gallery .swiper:not(.swiper-thumbs) .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.ts-gallery .swiper-thumbs {
  max-height: none !important;
  margin-top: 12px;
}
.ts-gallery .swiper-thumbs .swiper-slide {
  border-radius: var(--ts-r-sm);
  overflow: hidden;
  background: var(--ts-card-alt);
  cursor: pointer;
  opacity: 0.55;
  border: 1.5px solid transparent;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.ts-gallery .swiper-thumbs .swiper-slide img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.ts-gallery .swiper-thumbs .swiper-slide-thumb-active,
.ts-gallery .swiper-thumbs .swiper-slide:hover {
  opacity: 1;
  border-color: var(--ts-ink);
}
.ts-gallery .swiper-button-next, .ts-gallery .swiper-button-prev {
  background: rgba(251, 248, 242, 0.92);
  backdrop-filter: blur(6px);
  border: 1.5px solid var(--ts-line);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: var(--ts-ink);
}
.ts-gallery .swiper-button-next::after, .ts-gallery .swiper-button-prev::after { font-size: 0.9375rem; }

.ts-detail-tabs {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-xl);
  padding: 0.5rem 2rem 2rem;
}
.ts-detail-tabs .tab-content { padding-top: 1.75rem; }
.ts-detail-tabs .ts-specs { background: var(--ts-line); }
.ts-detail-tabs .ts-specs__item { background: var(--ts-bg); }
@media (max-width: 767.98px) {
  .ts-detail-tabs { padding: 0.5rem 1.25rem 1.5rem; }
  .ts-detail-tabs .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ts-detail-tabs .nav-tabs::-webkit-scrollbar { display: none; }
  .ts-detail-tabs .nav-link { white-space: nowrap; }
}

.ts-detail-panel {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-lg);
  padding: 2rem;
}
@media (min-width: 992px) {
  .ts-detail-panel { position: sticky; top: 96px; }
}
.ts-detail-title {
  font-family: var(--ts-font-display);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  line-height: 1.15;
}
.ts-detail-place {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; color: var(--ts-faint);
  margin-bottom: 1.5rem;
}
.ts-detail-place img { border-radius: 2px; }

.ts-detail-price { margin-bottom: 1.5rem; }
.ts-detail-price__main {
  display: block;
  font-family: var(--ts-font-mono);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.ts-detail-price__alt { font-family: var(--ts-font-mono); font-size: 0.9375rem; color: var(--ts-faint); }
.ts-detail-price__dph { display: block; font-size: 0.75rem; color: var(--ts-faint); margin-top: 4px; }

.ts-detail-actions { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 1.75rem; }
.ts-detail-phone a { font-family: var(--ts-font-mono); font-size: 1.375rem; font-weight: 700; }

/* Prodejce / lokalita */
.ts-dealer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ts-bg);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-md);
  padding: 0.875rem 1.125rem;
  margin-bottom: 1.25rem;
}
.ts-dealer__name { font-size: 0.9375rem; font-weight: 700; color: var(--ts-ink); }
.ts-dealer__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ts-font-mono);
  font-size: 0.6875rem;
  color: var(--ts-faint);
  margin-top: 3px;
}
.ts-dealer__meta img { border-radius: 2px; }
.ts-dealer__verified {
  font-family: var(--ts-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ts-good);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Tmavý panel s daty z vozu */
.ts-vehicle-data {
  background: var(--ts-ink);
  border-radius: var(--ts-r-md);
  padding: 1.25rem;
  margin-bottom: 1.75rem;
}
.ts-vehicle-data__head {
  font-family: var(--ts-font-mono);
  font-size: 0.6875rem;
  color: var(--ts-faint);
  letter-spacing: 0.04em;
  margin-bottom: 0.875rem;
}
.ts-vehicle-data__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem 1rem; }
.ts-vehicle-data__label { font-size: 0.6875rem; color: var(--ts-faint); margin-bottom: 3px; }
.ts-vehicle-data__value {
  font-family: var(--ts-font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ts-bg);
  line-height: 1.2;
}
.ts-vehicle-data__value--sm { font-size: 0.8125rem; font-weight: 600; }

/* Výbava jako pilulky */
.ts-equipment { display: flex; flex-wrap: wrap; gap: 10px; }
.ts-equipment__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-pill);
  padding: 0.5625rem 1rem;
  font-size: 0.875rem;
  color: var(--ts-ink);
}
.ts-equipment__item i { color: var(--ts-good); font-size: 0.875rem; }

.ts-detail-soh {
  border-top: 1.5px solid var(--ts-line);
  padding-top: 1.75rem;
}
.ts-detail-desc {
  border-top: 1.5px solid var(--ts-line);
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ts-muted);
}

/* Porovnání SoH s trhem */
.ts-soh-compare { padding: 2.5rem; }
.ts-soh-compare__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: center;
}
.ts-soh-compare__value {
  font-family: var(--ts-font-mono);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--ts-bg);
  line-height: 1;
}
.ts-soh-compare__note { font-size: 0.8125rem; color: var(--ts-on-dark-2); margin-top: 6px; max-width: 260px; }
.ts-soh-bar {
  height: 8px;
  background: rgba(243, 239, 230, 0.15);
  border-radius: var(--ts-pill);
  overflow: hidden;
  margin-bottom: 0.875rem;
}
.ts-soh-bar__fill { height: 100%; border-radius: var(--ts-pill); transition: width 0.6s ease; }
.ts-soh-bar__fill--good    { background: var(--ts-good); }
.ts-soh-bar__fill--warning { background: var(--ts-mid); }
.ts-soh-bar__fill--danger  { background: var(--ts-bad); }
.ts-soh-compare__status { font-family: var(--ts-font-mono); font-size: 0.875rem; font-weight: 600; }
.ts-soh-compare__status--good    { color: var(--ts-good); }
.ts-soh-compare__status--warning { color: var(--ts-mid); }
.ts-soh-compare__status--danger  { color: #e07469; }

@media (max-width: 767.98px) {
  .ts-soh-compare { padding: 1.75rem; }
  .ts-soh-compare__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ts-detail-panel { padding: 1.5rem; }
}

/* Chat (AI poradce) */
.ts-chat__msg {
  border-radius: 14px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  max-width: 80%;
  margin-bottom: 0.75rem;
  line-height: 1.55;
}
.ts-chat__msg--user { align-self: flex-end; margin-left: auto; background: var(--ts-ink); color: var(--ts-bg); border-bottom-right-radius: 4px; }
.ts-chat__msg--bot  { align-self: flex-start; background: var(--ts-accent); color: var(--ts-ink); border-bottom-left-radius: 4px; }

/* Duální cena */
.ts-price-dual { display: inline-flex; flex-direction: column; gap: 2px; }
.ts-price-dual__main { font-family: var(--ts-font-mono); font-size: 1.375rem; font-weight: 700; }
.ts-price-dual__alt  { font-family: var(--ts-font-mono); font-size: 0.875rem; color: var(--ts-faint); }

/* Boční filtry */
.ts-filter-group { margin-bottom: 1.75rem; }
.ts-filter-group__title {
  font-size: 0.8125rem; font-weight: 700; color: var(--ts-ink);
  margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.ts-filter-panel {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-lg);
  padding: 1.75rem;
}

/* ---- Výpis vozů (rozvržení podle návrhu) ---- */
.ts-listing { padding: 2.75rem 0 6rem; }

.ts-listing-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.ts-listing-count {
  font-family: var(--ts-font-mono);
  font-size: 0.875rem;
  color: var(--ts-muted);
  white-space: nowrap;
}

.ts-listing-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.ts-listing-toolbar .btn { flex: 1 1 auto; }
.ts-listing-sort { min-width: 240px; }
.ts-listing-sort .form-select { padding: 0.6875rem 2.75rem 0.6875rem 1rem; font-size: 0.875rem; }

.ts-listing-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}
.ts-listing-main { min-width: 0; }

/* Sloupce přiřazujeme výslovně, aby rozvržení nezáviselo na pořadí v DOM */
@media (min-width: 992px) {
  .ts-listing-layout > .ts-filters { grid-column: 1; grid-row: 1; }
  .ts-listing-layout > .ts-listing-main { grid-column: 2; grid-row: 1; }
}

.ts-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 1.5rem;
}
.ts-cards__full { grid-column: 1 / -1; }
.ts-cards__item { min-width: 0; }

@media (max-width: 1199.98px) {
  .ts-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .ts-listing { padding: 1.75rem 0 4rem; }
  .ts-listing-layout { grid-template-columns: 1fr; gap: 0; }
  .ts-listing-layout > .ts-filters { display: none; }   /* na mobilu je filtr v modálu */
}
@media (max-width: 575.98px) {
  .ts-cards { grid-template-columns: 1fr; }
}

/* Aktivní filtry nad výpisem */
.ts-active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.ts-active-filters__label {
  font-family: var(--ts-font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ts-faint);
}
.ts-active-filters__reset {
  font-size: 0.75rem;
  color: var(--ts-faint);
  text-decoration: underline;
  margin-left: 0.25rem;
}
.ts-active-filters__reset:hover { color: var(--ts-ink); }

/* ---- Boční filtry ---- */
.ts-filters { min-width: 0; }
@media (min-width: 992px) {
  .ts-filters { position: sticky; top: 96px; }
}
.ts-filters .form-select { font-size: 0.875rem; padding: 0.625rem 2.5rem 0.625rem 0.875rem; }
.ts-filters__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1.5px solid var(--ts-line);
  padding-top: 1.5rem;
}
.ts-filters__promo {
  border-top: 1.5px solid var(--ts-line);
  padding-top: 1.5rem;
  margin-top: 1.75rem;
  margin-bottom: 0;
}

/* Skupina chipů (model, stav) */
.ts-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-chips .ts-chip { margin: 0; }
.ts-chip input[type="radio"],
.ts-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ts-chip:focus-within { outline: 2px solid var(--ts-ink); outline-offset: 2px; }

/* Vizuální pás rozsahu + číselné vstupy */
.ts-range {
  position: relative;
  height: 4px;
  background: rgba(20, 19, 16, 0.1);
  border-radius: 2px;
  margin-bottom: 10px;
}
.ts-range__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--ts-accent);
  border-radius: 2px;
}
.ts-range__label {
  font-family: var(--ts-font-mono);
  font-size: 0.75rem;
  color: var(--ts-faint);
  margin-bottom: 10px;
}
.ts-range__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ts-range__inputs .form-control {
  font-family: var(--ts-font-mono);
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
}

/* Filtry uvnitř mobilního modálu */
#modal-filtering .ts-filters { position: static; }
#modal-filtering .ts-filters__promo { display: none; }

/* Prázdný výpis */
.ts-empty {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  border-radius: var(--ts-r-xl);
  padding: 3rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.ts-empty__stat .ts-stat { padding: 2rem; }
.ts-empty__stat .ts-stat__num { font-size: 3rem; }
@media (max-width: 767.98px) {
  .ts-empty { grid-template-columns: 1fr; padding: 1.75rem; }
}

/* Barvy karoserie */
.ts-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ts-line-2); cursor: pointer; display: inline-block; }
.ts-swatch.is-active { border-color: var(--ts-ink); box-shadow: 0 0 0 2px var(--ts-bg), 0 0 0 4px var(--ts-ink); }

/* --------------------------------------------------------------------------
   15. Slider / swiper
   -------------------------------------------------------------------------- */

.swiper-pagination-bullet { background: var(--ts-ink); opacity: 0.2; }
.swiper-pagination-bullet-active { background: var(--ts-ink); opacity: 1; }
.swiper-button-next, .swiper-button-prev { color: var(--ts-ink); }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 1.125rem; font-weight: 700; }

/* Posuvník nahoru */
.progress-wrap {
  background: var(--ts-card);
  border: 1.5px solid var(--ts-line);
  box-shadow: var(--ts-shadow-sm);
}
.progress-wrap::after { color: var(--ts-ink); }
.progress-wrap svg.progress-circle path { stroke: var(--ts-ink); }

/* --------------------------------------------------------------------------
   16. Cookie lišta
   -------------------------------------------------------------------------- */

#cc-main {
  --cc-bg: #fbf8f2;
  --cc-primary-color: #14130f;
  --cc-secondary-color: #5c584e;
  --cc-btn-primary-bg: #14130f;
  --cc-btn-primary-color: #f3efe6;
  --cc-btn-primary-border-color: #14130f;
  --cc-btn-primary-hover-bg: #26241d;
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: #14130f;
  --cc-btn-secondary-border-color: rgba(20, 19, 16, 0.16);
  --cc-btn-secondary-hover-bg: rgba(20, 19, 16, 0.06);
  --cc-separator-border-color: rgba(20, 19, 16, 0.12);
  --cc-toggle-on-bg: #3f8f5c;
  --cc-modal-border-radius: 16px;
  --cc-btn-border-radius: 100px;
  --cc-font-family: 'General Sans', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   17. Patička
   -------------------------------------------------------------------------- */

footer, footer.bg-light { background: var(--ts-bg) !important; }
.ts-footer-wrap { padding-top: 4rem; }

.ts-footer-cta {
  padding: 4.5rem 3rem;
  text-align: center;
  margin-bottom: 4rem;
}
.ts-footer-cta__title {
  font-family: var(--ts-font-display);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ts-bg) !important;
  margin: 0 auto 2rem;
  max-width: 720px;
}
.ts-footer-cta .ts-eyebrow { margin-bottom: 1rem; }

.ts-footer { border-top: 1.5px solid rgba(20, 19, 16, 0.1); padding: 3.5rem 0 2.5rem; }
.ts-footer a { color: var(--ts-muted); text-decoration: none; font-size: 0.875rem; }
.ts-footer a:hover { color: var(--ts-ink); text-decoration: underline; }
.ts-footer .widget-title { margin-bottom: 0.875rem; }
.ts-footer p, .ts-footer address { font-size: 0.8125rem; color: var(--ts-faint); line-height: 1.6; font-style: normal; }
.ts-footer .ts-logo { font-size: 1.25rem; display: inline-flex; margin-bottom: 0.75rem; }
.ts-footer__links li { margin-bottom: 0.5rem; }
.ts-footer__links i { color: var(--ts-faint); margin-right: 4px; }

@media (max-width: 767.98px) {
  .ts-footer-cta { padding: 2.75rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   18. Drobnosti a responsivita
   -------------------------------------------------------------------------- */

img { max-width: 100%; height: auto; }
figure img { border-radius: var(--ts-r-sm); }

.rotator-fade, .rotator-zoom { color: var(--ts-ink) !important; font-weight: 700; }

/* Původní téma používá utility s velkými odsazeními — mírně zkrotíme */
.py-14 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-16, .pt-16 { padding-top: 4.5rem !important; }
.p-10 { padding: 2rem !important; }

@media (max-width: 991.98px) {
  .navbar .container { min-height: 66px; }
  .ts-panel { padding: 1.5rem; }
  .ts-step { padding: 1.5rem; }
  .ts-browser { padding: 10px; }
  .ts-browser__screen { padding: 1rem; }
  .py-14 { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
}

@media (max-width: 575.98px) {
  body { font-size: 15px; }
  .btn { padding: 0.8125rem 1.375rem; }
  .btn-lg { padding: 0.9375rem 1.5rem; }
  .card-body { padding: 1.25rem; }
  .ts-specs { grid-template-columns: 1fr 1fr; }
}

@media print {
  .navbar, .ts-topbar, footer, .progress-wrap, #cc-main { display: none !important; }
  body { background: #fff; }
}