@charset "UTF-8";
/* =============================================================================
   AUTO DASPOL — komponenty a sekce
   Navazuje na bofb.css (tokeny, mřížka, utility). Vrstvy jsou deklarované
   tam; tady se do nich jen dopisuje.
   ========================================================================== */

@layer components {

  /* ===========================================================================
     TLAČÍTKA
     ======================================================================== */

  .btn {
    --btn-bg:     var(--ink);
    --btn-fg:     #fff;
    --btn-bd:     transparent;
    --btn-bg-h:   #24262B;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.875rem 1.75rem;
    min-height: 48px;              /* pohodlný cíl pro prst */
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow: var(--sh-xs);
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                box-shadow var(--dur) var(--ease);
  }

  .btn:hover {
    background: var(--btn-bg-h);
    color: var(--btn-fg);
    transform: translateY(-1px);
    box-shadow: var(--sh-md);
  }

  .btn:active { transform: translateY(0); box-shadow: var(--sh-xs); }

  .btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }

  .btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
  }

  /* Varianty */
  /* Druhá úroveň. Po najetí se ZÁMĚRNĚ nevybarvuje načerno — vypadalo by pak
     stejně jako primární tlačítko nad ním. Místo toho ztmavne obrys a text,
     zpětnou vazbu dodává nadzvednutí a stín ze společného .btn:hover. */
  .btn-outline-dark {
    --btn-bg: transparent;
    --btn-fg: var(--ink-2);
    --btn-bd: var(--line-2);
    --btn-bg-h: transparent;
  }

  .btn-outline-dark:hover,
  .btn-outline-dark:focus-visible {
    color: var(--ink);
    border-color: var(--ink);
  }

  .btn-light,
  .btn-light-big {
    --btn-bg: #fff;
    --btn-fg: var(--ink);
    --btn-bd: transparent;
    --btn-bg-h: #fff;
  }
  .btn-light:hover, .btn-light-big:hover { color: var(--ink); }

  .btn-light-big { padding: 1rem 2rem; font-size: var(--fs-lead); }

  .btn-accent {
    --btn-bg: var(--accent);
    --btn-fg: #fff;
    --btn-bg-h: var(--accent-ink);
  }

  /* Třetí úroveň v pořadí důležitosti: jemná výplň bez obrysu.
     Průhledné pozadí z něj dělalo pouhý text — jako tlačítko nepůsobilo. */
  .btn-ghost {
    --btn-bg: var(--surface-3);
    --btn-fg: var(--ink-2);
    --btn-bd: transparent;
    --btn-bg-h: #E4E7EC;
    box-shadow: none;
  }
  .btn-ghost:hover { color: var(--ink); box-shadow: none; }

  /* Skleněné tlačítko na fotku (hero) */
  .btn-glass {
    --btn-bg: rgba(255, 255, 255, 0.14);
    --btn-fg: #fff;
    --btn-bd: rgba(255, 255, 255, 0.28);
    --btn-bg-h: rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
  .btn-glass:hover { color: #fff; }

  /* Varianty pod původními názvy. Šablony je používají 67× ve 23 souborech,
     takže je levnější uznat je za platné než je všude přepisovat. */
  .bob-btn-outline {
    --btn-bg: transparent;
    --btn-fg: var(--ink-2);
    --btn-bd: var(--line-2);
    --btn-bg-h: transparent;
  }

  .bob-btn-outline:hover,
  .bob-btn-outline:focus-visible {
    color: var(--ink);
    border-color: var(--ink);
  }

  .bob-btn-primary {
    --btn-bg: var(--ink);
    --btn-fg: #fff;
    --btn-bg-h: #24262B;
  }

  .btn-sm { padding: 0.625rem 1.125rem; min-height: 40px; font-size: var(--fs-sm); }
  .btn-block { width: 100%; }

  /* Šipka, která se při najetí posune — drobnost, ale je cítit */
  .btn .btn-arrow { transition: transform var(--dur) var(--ease-out); }
  .btn:hover .btn-arrow { transform: translateX(3px); }


  /* ===========================================================================
     ODZNAKY A ŠTÍTKY
     ======================================================================== */

  .badge,
  .bob-chip,
  .badge-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 550;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: nowrap;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    color: var(--ink-2);
    border: 1px solid transparent;
  }

  .bob-chip { padding: 0.375rem 0.8125rem; font-size: var(--fs-xs); }

  .badge.bg-light  { background: var(--surface-3); color: var(--ink-2); }
  .badge.bg-dark   { background: var(--ink); color: #fff; }

  .bob-chip--sale,
  .stock-badge--percent {
    background: var(--sale);
    color: #fff;
  }

  .bob-chip--save,
  .stock-badge--save {
    background: var(--sale-deep);
    color: #fff;
  }

  /* Odznaky ležící na fotce vozu.
     Sdílejí jeden obal a řadí se za sebou. Dřív byly ukotvené absolutně
     vlevo a vpravo, což na úzké kartě znamenalo, že se přes sebe přeložily. */
  .stock-card__badges {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    right: var(--sp-3);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    pointer-events: none;
  }

  .stock-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.6875rem;
    font-size: var(--fs-2xs);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.01em;
    border-radius: var(--r-pill);
    box-shadow: var(--sh-sm);
  }

  .stock-badge--green { background: var(--success); color: #fff; }

  /* Na širokém displeji má karta v článku 500 px a odznaky vypadají stejně jako
     ve výpisu skladu. Užší displeje ale kartu srazí a tři odznaky vedle sebe
     zaberou skoro celou fotku — tam jsou proto o kousek drobnější. */
  @media (max-width: 991.98px) {
    .bob-article__content .stock-card__badges { gap: 0.25rem; }

    .bob-article__content .stock-badge {
      padding: 0.3125rem 0.5625rem;
      font-size: 0.6875rem;
    }
  }

  .bob-badge-akce {
    padding: 0.375rem 0.6875rem;
    font-size: var(--fs-2xs);
    font-weight: 650;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-sm);
  }


  /* ===========================================================================
     KARTA VOZU — nejdůležitější komponenta webu
     ======================================================================== */

  .bob-carcard { height: 100%; }

  /* Proklikávací celá plocha karty.
     Ukazatel se nastavuje i bez třídy .is-clickable (tu dodává až cards.js),
     aby karta nevypadala jako text ve chvíli, než se skript načte. */
  .is-clickable,
  .service-card,
  .news-card,
  .offer-card { cursor: pointer; }

  /* Text uvnitř proklikávací karty se nemá chovat jako text k označení —
     kurzor „psaní" nad kartou byl přesně tenhle případ. */
  .service-card *,
  .news-card *,
  .offer-card * { cursor: inherit; }

  /* …ale skutečné odkazy a tlačítka uvnitř si ukazatel drží samy */
  .service-card a,
  .news-card a,
  .offer-card a,
  .service-card button,
  .news-card button { cursor: pointer; }

  .bob-carcard__link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: var(--r-lg);
  }
  .bob-carcard__link:hover { color: inherit; }
  .bob-carcard__link:focus-visible { outline: none; }
  .bob-carcard__link:focus-visible .stock-card { box-shadow: var(--sh-focus), var(--sh-lg); }

  .stock-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease);
  }

  .bob-carcard__link:hover .stock-card {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
    border-color: transparent;
  }

  /* --- Fotka --------------------------------------------------------------
     Fotky z feedu TipCars nemají jednotný poměr stran: 82 % je 4:3 (800×600),
     18 % je 16:9 (800×450). Rámeček je proto 4:3 (většinový případ) a fotka
     se do něj VEPISUJE (contain), nikdy neořezává — u širokých snímků by
     cover uřízl vozu předek nebo záď, což je u prodeje aut to poslední, co
     chceme. Zbytek plochy je bílý, takže u ateliérových fotek na bílém
     pozadí není dopsání vůbec znát. Vystředěno svisle i vodorovně.        */
  .stock-card .preview {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
  }

  .stock-card .preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .bob-carcard__link:hover .preview img,
  .bob-carcard__link:hover .stock-card__img { transform: scale(1.045); }

  /* --- Tělo karty -------------------------------------------------------- */
  .stock-card .stock-detail {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--surface);
  }

  .stock-card h3,
  .stock-card__title {
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: var(--tracking-head);
    color: var(--ink);
    /* Dva řádky a dost — jinak se karty v mřížce rozjedou do různých výšek */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .stock-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .stock-card__noimg { display: block; width: 100%; height: 100%; background: var(--surface-3); }

  /* Štítky parametrů. Cíl je vejít se na jeden řádek; zalomení zůstává jako
     pojistka pro nezvykle dlouhé hodnoty, ne jako běžný stav. */
  .stock-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .stock-card__prices { margin-top: auto; display: flex; flex-direction: column; gap: 0.125rem; }

  .stock-vin {
    margin-top: var(--sp-2);
    font-size: 0.6875rem;
    color: var(--ink-4);
  }

  .stock-card .badge-stock {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--ink-3);
  }

  /* --- Cena -------------------------------------------------------------- */
  .stock-card .stock-price {
    display: block;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 750;
    letter-spacing: var(--tracking-head);
    color: var(--ink);
    line-height: 1.2;
  }

  .stock-card .stock-vat {
    display: block;
    font-size: var(--fs-xs);
    color: var(--ink-3);
  }

  /* Cena je zarovnaná na spodní hranu, ať karty v řadě lícují */
  .stock-card .stock-detail > div:last-child { margin-top: auto; }

  .stock-card .stock-price-old {
    font-size: var(--fs-sm);
    color: var(--ink-4);
    text-decoration: line-through;
  }


  /* ===========================================================================
     KARTY: akce, novinky, služby
     ======================================================================== */

  .offer-card,
  .service-card {
    position: relative;
    display: block;
    height: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface-3);
    box-shadow: var(--sh-sm);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }

  .offer-card:hover,
  .service-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

  .offer-card img,
  .service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 10;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .offer-card:hover img,
  .service-card:hover img { transform: scale(1.05); }

  /* Přechod zdola, aby byl text čitelný na jakékoli fotce */
  .offer-overlay,
  .service-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: var(--sp-6);
    background: linear-gradient(to top,
                rgba(11, 12, 14, 0.86) 0%,
                rgba(11, 12, 14, 0.42) 42%,
                rgba(11, 12, 14, 0) 72%);
  }

  .offer-content h3,
  .service-content h2 {
    color: #fff;
    font-size: var(--fs-h3);
    margin-bottom: var(--sp-3);
  }

  .offer-content a { color: #fff; }

  .service-content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

  .service-content .btn-outline-dark {
    --btn-fg: #fff;
    --btn-bd: rgba(255, 255, 255, 0.4);
    --btn-bg-h: #fff;
  }
  .service-content .btn-outline-dark:hover { color: var(--ink); }

  /* Titulek ležící na fotce.
     Musí mít VLASTNÍ přechod — overlay se objevuje až při najetí myší, takže
     bez něj by byl bílý text na světlé fotce nečitelný (a na dotykových
     zařízeních, kde najetí neexistuje, trvale). */
  .offer-title {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--sp-10) var(--sp-5) var(--sp-5);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h4);
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 1px 2px rgba(11, 12, 14, 0.35);
    background: linear-gradient(to top,
                rgba(11, 12, 14, 0.82) 0%,
                rgba(11, 12, 14, 0.45) 45%,
                rgba(11, 12, 14, 0) 100%);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  .offer-card:hover .offer-title { opacity: 0; }
  .offer-card .offer-overlay { opacity: 0; transition: opacity var(--dur) var(--ease); }
  .offer-card:hover .offer-overlay { opacity: 1; }

  /* --- Novinky ----------------------------------------------------------- */
  .news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }

  .news-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

  .news-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .news-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--sp-5) var(--sp-5) var(--sp-8);
  }

  .news-body h3 { font-size: var(--fs-h4); }

  .news-body p {
    font-size: var(--fs-sm);
    color: var(--ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Odsazení řeší CSS, ne bootstrapové utility v šabloně — datum a štítek
     se jinak lepily na odstavec pod sebou. */
  .news-meta {
    gap: var(--sp-2);
    margin: var(--sp-3) 0 var(--sp-5);
  }

  /* Šipka je pseudoprvek, ne znak v textu — jen tak se dá samostatně posunout. */
  .read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    align-self: flex-start;
    margin-top: auto;
    padding-top: var(--sp-5);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--ink);
    text-decoration: none;
  }

  .read-more::after {
    content: "→";
    display: inline-block;
    transition: transform var(--dur) var(--ease-out);
  }

  /* Zůstává černý — modrá by v mřížce karet zbytečně křičela. */
  .read-more:hover,
  .read-more:focus-visible { color: var(--ink); }
  .read-more:hover::after,
  .news-card:hover .read-more::after { transform: translateX(5px); }


  /* ===========================================================================
     HLAVIČKA A NAVIGACE
     ======================================================================== */

  .navbar {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border-bottom: 1px solid var(--line-soft);
    padding-block: var(--sp-3);
    transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  }

  .navbar.is-scrolled { box-shadow: var(--sh-sm); background: rgba(255, 255, 255, 0.94); }

  .navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(var(--sp-6), 3vw, var(--sp-16));
  }

  .navbar-brand { display: inline-flex; align-items: center; text-decoration: none; }

  /* Skupina log drží vlastní vnitřní rozestup — v šabloně byl řešený
     vloženým stylem, což se s designovým systémem tlouklo. */
  .navbar__brands { display: flex; align-items: center; gap: var(--sp-5); }

  .logo-header-bob { height: 28px; width: auto; }

  /* Logo partnerské značky: ve výchozím stavu odbarvené, aby v hlavičce
     nesoupeřilo s logem Kia. Barvy naskočí po najetí myší. */
  .logo-header-kia {
    height: 22px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.65;
    transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }

  .brand-logo-kia:hover .logo-header-kia,
  .brand-logo-kia:focus-visible .logo-header-kia {
    filter: grayscale(0);
    opacity: 1;
  }

  /* Dotykové zařízení najetí myší nezná — tam se logo ukáže rovnou barevné */
  @media (hover: none) {
    .logo-header-kia { filter: none; opacity: 1; }
  }

  .nav-logo-divider {
    width: 1px;
    height: 26px;
    background: var(--line-2);
    flex-shrink: 0;
  }

  .navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--ink-2);
    text-decoration: none;
    border-radius: var(--r-pill);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }

  .nav-link:hover { color: var(--ink); background: var(--surface-3); }

  .nav-link[aria-current="page"],
  .current-menu-item > .nav-link {
    color: var(--ink);
    background: var(--surface-3);
    font-weight: 650;
  }

  /* Přepínací bod je 1200 px, ne 992 px.
     Loga (~456 px) a sedm položek menu (~669 px) potřebují dohromady zhruba
     1210 px. Kdyby se desktopové menu zapínalo dřív, na noteboocích s užším
     displejem by se logo s menu tlouklo. Pod tím nastupuje fullscreen menu. */
  .navbar-collapse { display: none; }
  @media (min-width: 1200px) { .navbar-collapse { display: flex; justify-content: flex-end; } }

  /* V nejtěsnějším desktopovém pásmu ještě mírně stáhnout */
  @media (min-width: 1200px) and (max-width: 1399.98px) {
    .logo-header-bob { height: 24px; }
    .logo-header-kia { height: 19px; }
    .navbar__brands  { gap: var(--sp-4); }
    .nav-link        { padding-inline: 0.5rem; font-size: 0.9rem; }
  }

  /* --- Hamburger --------------------------------------------------------- */
  .navbar-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
  }
  .navbar-menu:hover { background: var(--surface-3); }
  @media (min-width: 1200px) { .navbar-menu { display: none; } }

  .navbar-menu__bars {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
  }

  .navbar-menu__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
  }

  .navbar-menu__bars span:nth-child(1) { top: 0; }
  .navbar-menu__bars span:nth-child(2) { top: 6px; }
  .navbar-menu__bars span:nth-child(3) { top: 12px; }

  .navbar-menu[aria-expanded="true"] .navbar-menu__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .navbar-menu[aria-expanded="true"] .navbar-menu__bars span:nth-child(2) { opacity: 0; }
  .navbar-menu[aria-expanded="true"] .navbar-menu__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


  /* ===========================================================================
     FULLSCREEN MOBILNÍ MENU
     ======================================================================== */

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) var(--sp-8);
    background: var(--surface);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease-out),
                visibility 0s linear var(--dur);
  }

  /* Pozor: přepínač je třída na <body>, ne na samotném menu (viz mobile-menu.js) */
  body.is-menu-open .mobile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mobile-menu__inner { display: flex; flex-direction: column; gap: var(--sp-8); max-width: 34rem; width: 100%; }

  .mobile-menu__nav ul { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }

  .mobile-menu__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 2vw, 2rem);
    font-weight: 700;
    letter-spacing: var(--tracking-head);
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
  }

  .mobile-menu__nav a:active { color: var(--accent); }

  /* Položky se navléknou postupně — proměnná --i je v šabloně */
  body.is-menu-open .mobile-menu__nav li,
  body.is-menu-open .mobile-menu__contacts,
  body.is-menu-open .mobile-menu__social {
    animation: menu-in var(--dur-slow) var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
  }

  @keyframes menu-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .mobile-menu__contacts-label,
  .mobile-menu__social-label {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-2xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-4);
  }

  .mobile-menu__contact {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    margin-bottom: var(--sp-2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--ink);
  }

  .mobile-menu__contact i { font-size: 1.25rem; color: var(--ink-3); }
  .mobile-menu__contact-role { font-size: var(--fs-sm); color: var(--ink-3); }
  .mobile-menu__contact-num { font-weight: 650; font-variant-numeric: tabular-nums; }

  .mobile-menu__social-links { display: flex; gap: var(--sp-3); }

  .mobile-menu__social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    text-decoration: none;
  }

  .mobile-menu__social-links a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

  /* Když je menu otevřené, stránka pod ním se nesmí posouvat */
  body.is-menu-open { overflow: hidden; }

  /* Hamburger musí zůstat nad překryvem, aby šlo menu zavřít */
  body.is-menu-open .navbar { z-index: calc(var(--z-overlay) + 1); background: transparent; border-color: transparent; }
  body.is-menu-open .navbar.is-scrolled { box-shadow: none; }


  /* ===========================================================================
     DROBEČKOVÁ NAVIGACE
     ======================================================================== */

  /* Selektor je schválně vázaný na <section>. Třída se v šablonách omylem
     objevila i na samotném <ol> a rámeček se pak vykreslil dvakrát — jednou
     přes celou šířku, podruhé jen přes šířku kontejneru. */
  section.bob-breadcrumb {
    padding-block: var(--sp-4);
    background: transparent;
    border-bottom: 1px solid var(--line);
  }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--ink-3);
  }

  .breadcrumb-item a { color: var(--ink-3); text-decoration: none; }
  .breadcrumb-item a:hover { color: var(--ink); }
  .breadcrumb-item.active { color: var(--ink); font-weight: 550; }

  /* Oddělovač jako pseudoprvek — v šabloně tak nemusí být ručně vypsaný */
  .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    margin-inline-end: var(--sp-2);
    color: var(--ink-4);
  }


  /* ===========================================================================
     FORMULÁŘE
     ======================================================================== */

  .form-field { display: flex; flex-direction: column; gap: var(--sp-2); }

  .form-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
  }

  .form-label .req { color: var(--sale); }

  .form-control,
  .form-select,
  textarea.form-control {
    width: 100%;
    padding: 0.8125rem 1rem;
    min-height: 48px;
    font-size: var(--fs-body);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    /* 16 px je minimum, jinak Safari na iPhonu při fokusu přiblíží stránku */
    font-size: max(16px, var(--fs-body));
  }

  .form-control::placeholder { color: var(--ink-4); }

  .form-control:focus,
  .form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--sh-focus);
  }

  .form-control[aria-invalid="true"] { border-color: var(--sale); }

  textarea.form-control { min-height: 130px; resize: vertical; }

  .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px;
    padding-inline-end: 2.75rem;
  }

  .form-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-3);
    align-items: start;
    font-size: var(--fs-sm);
    color: var(--ink-3);
  }

  .form-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--accent);
    cursor: pointer;
  }

  .form-error {
    font-size: var(--fs-xs);
    color: var(--sale);
  }

  .form-note { font-size: var(--fs-xs); color: var(--ink-4); }

  /* Med na boty — pro člověka neviditelné, pro čtečku skryté */
  .form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .form-alert {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
  }
  .form-alert--ok  { background: var(--success-soft); color: var(--success); }
  .form-alert--err { background: var(--sale-soft); color: var(--sale); }


  /* ===========================================================================
     FILTRACE (FacetWP)
     ======================================================================== */

  .bob-filter {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
  }

  .bob-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h4);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }

  /* Zrušení filtrů je tichý odkaz v hlavičce panelu.
     Jako velké tmavé tlačítko pod filtry působilo jako hlavní akce stránky,
     přitom je to jen doplněk. */
  .bob-filter__reset {
    padding: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-3);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--line-2);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease);
  }

  .bob-filter__reset:hover { color: var(--sale); text-decoration-color: currentColor; }

  .bob-filter__section {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--line);
  }

  .bob-filter__title {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-4);
  }

  /* Ostrý FacetWP renderuje položku jako <div class="facetwp-checkbox"> se
     dvěma <span>y — bez vnořeného prvku pro zaškrtávátko. To si proto kreslíme
     pseudoprvkem. (Lokální náhrada používala <a>; obě varianty jsou pokryté.) */
  .facetwp-checkbox {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.3125rem var(--sp-2);
    margin-inline: calc(var(--sp-2) * -1);
    font-size: var(--fs-sm);
    line-height: 1.35;
    color: var(--ink-2);
    text-decoration: none;
    border-radius: var(--r-xs);
    cursor: pointer;
    /* FacetWP si dává vlastní obrázek zaškrtávátka do pozadí — pryč s ním */
    background-image: none;
    transition: background var(--dur-fast) var(--ease);
  }

  .facetwp-checkbox:hover { background: var(--surface-2); color: var(--ink); }

  .facetwp-checkbox::before,
  .facetwp-box {
    content: "";
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--line-2);
    border-radius: 5px;
    background: var(--surface);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }

  .facetwp-checkbox.checked { color: var(--ink); font-weight: 600; }

  .facetwp-checkbox.checked::before,
  .facetwp-checkbox.checked .facetwp-box {
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-6'/%3E%3C/svg%3E") center / 13px no-repeat;
    border-color: var(--accent);
  }

  /* Náhrada používá <a> s vnořeným .facetwp-box — tam pseudoprvek nechceme */
  a.facetwp-checkbox::before { content: none; }

  .facetwp-display-value { min-width: 0; }

  .facetwp-counter,
  .facetwp-count {
    font-size: var(--fs-2xs);
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
  }

  .facetwp-range { display: flex; align-items: center; gap: var(--sp-2); }
  .facetwp-range input {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    min-height: 40px;
    font-size: var(--fs-sm);
    border: 1px solid var(--line-2);
    border-radius: var(--r-xs);
    background: var(--surface);
  }
  .facetwp-range input:focus { outline: none; border-color: var(--accent); box-shadow: var(--sh-focus); }
  .facetwp-range-sep { color: var(--ink-4); }

  .facetwp-sort-select {
    appearance: none;
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    min-height: 44px;
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--ink);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E") no-repeat right 1rem center / 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    cursor: pointer;
  }

  .facetwp-counts { font-size: var(--fs-sm); color: var(--ink-3); }

  .facetwp-pager { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

  .facetwp-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding-inline: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }

  .facetwp-page:hover { background: var(--surface-3); color: var(--ink); }
  .facetwp-page.active { background: var(--ink); color: #fff; border-color: var(--ink); }

  .bob-noresults {
    padding: var(--sp-16) var(--sp-6);
    text-align: center;
    color: var(--ink-3);
    background: var(--surface);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-lg);
  }

}


/* =============================================================================
   SEKCE
   ========================================================================== */

@layer sections {

  /* --- Hlavní obsah ------------------------------------------------------- */
  .page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }

  /* --- Oddělovač ---------------------------------------------------------- */
  .bob-divider {
    height: 1px;
    background: var(--line);
    margin-inline: auto;
    max-width: calc(var(--container) - var(--gutter) * 2);
  }

  /* --- Nadpis sekce ------------------------------------------------------- */
  .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-10);
  }

  .section-head h2 { margin: 0; }

  /* Odkaz „zobrazit vše" pod výpisem — na užších displejích nahrazuje
     tlačítko z hlavičky sekce, které se tam nevejde. */
  .section-more {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-8);
  }

  .section-more .btn { max-width: 100%; }

  /* Na nejužších displejích ať text tlačítka nepřetéká */
  @media (max-width: 400px) {
    .section-more .btn {
      white-space: normal;
      padding-inline: var(--sp-5);
      line-height: 1.35;
    }
  }

  /* --- HERO KARUSEL ------------------------------------------------------- */
  .bob-hero-carousel {
    position: relative;
    overflow: hidden;
    background: var(--surface-3);
    /* Svislé posouvání patří stránce, vodorovné karuselu. Bez toho si
       prohlížeč nárokuje oba směry a potažení prstem je nespolehlivé —
       často místo přepnutí banneru odscrolluje stránku. */
    touch-action: pan-y;
  }

  .carousel-inner { position: relative; width: 100%; overflow: hidden; }

  /* Mechanika převzatá z Bootstrapu — jeho JS přepíná třídy
     .carousel-item-next/-prev/-start/-end a počítá s tím, že se slidy
     PŘEKRÝVAJÍ. Trik float+záporný margin je přesně to, co překryv zajistí,
     aniž by se muselo sahat po position:absolute — díky tomu si karusel drží
     výšku nejvyššího slidu a funguje i s obrázkem o přirozeném poměru stran. */
  .carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    backface-visibility: hidden;
  }

  .carousel-item.active,
  .carousel-item-next,
  .carousel-item-prev { display: block; }

  /* Prolnutí místo posuvu — na reklamních bannerech působí klidněji */
  .bob-hero-carousel .carousel-item {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease);
  }

  .bob-hero-carousel .carousel-item.active,
  .bob-hero-carousel .carousel-item-next.carousel-item-start,
  .bob-hero-carousel .carousel-item-prev.carousel-item-end {
    z-index: 1;
    opacity: 1;
  }

  /* Odcházející slide zmizí až po doběhnutí prolnutí, jinak by problikl */
  .bob-hero-carousel .active.carousel-item-start,
  .bob-hero-carousel .active.carousel-item-end {
    z-index: 0;
    opacity: 0;
    transition: opacity 0s var(--dur-slow);
  }

  /* Poměr odpovídá skutečnému rozměru bannerů (1920×891), takže se z hotové
     grafiky nic neořízne — vnucené 21:9 z nich ubíralo asi 8 % výšky.
     Zároveň tím má prohlížeč místo rezervované dřív, než se obrázek stáhne. */
  .bob-hero__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 891;
    object-fit: cover;
  }


  /* Popisek sedí dole vlevo — banner má auto vpravo, takže levý dolní roh
     je jediné místo, kde text nepřekrývá to podstatné z fotky. */
  .bob-hero__caption {
    position: absolute;
    inset-inline: 0;
    top: auto;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--sp-12) var(--gutter) clamp(2.5rem, 1rem + 4vw, 5rem);
    color: #fff;
    text-align: left;
  }

  /* Přechod jde ZDOLA — tam, kde je text. */
  .bob-hero-carousel .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
                rgba(11, 12, 14, 0.72) 0%,
                rgba(11, 12, 14, 0.30) 42%,
                rgba(11, 12, 14, 0) 72%);
    pointer-events: none;
  }

  .bob-hero__caption h2 {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    color: #fff;
    max-width: 22ch;
  }

  .bob-hero__caption p {
    font-size: var(--fs-lead);
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
  }

  /* --- Hero na mobilu -----------------------------------------------------
     Text NENÍ na banneru, ale pod ním: svislá grafika si nese vlastní sdělení
     a titulek přes ni by se s ním pral.                                    */
  @media (max-width: 767.98px) {
    /* Poměr svislé varianty banneru (1080 × 1350). Musí odpovídat grafice,
       jinak by ji `object-fit: cover` ořízl, a zároveň drží místo dřív, než
       se obrázek stáhne — stránka pak po načtení neposkočí.
       Hranice je stejná jako v `media` u <source> v šabloně. */
    .bob-hero__img { aspect-ratio: 1080 / 1350; }

    /* Text v proudu stránky, ne přes fotku */
    .bob-hero__caption {
      position: static;
      align-items: flex-start;
      gap: var(--sp-2);
      padding: var(--sp-6) var(--gutter) var(--sp-8);
      color: var(--ink);
      text-align: left;
    }

    /* Ztmavení bannéru už nemá co chránit — text na něm neleží */
    .bob-hero-carousel .carousel-item::after { display: none; }

    .bob-hero__caption h2 { font-size: var(--fs-h2); color: var(--ink); }

    .bob-hero__caption p {
      font-size: var(--fs-body);
      color: var(--ink-3);
    }

    /* Bílé tlačítko by na světlém podkladu zmizelo */
    .bob-hero__caption .btn-light-big {
      font-size: var(--fs-sm);
      padding: 0.75rem 1.25rem;
      min-height: 44px;
      color: #fff;
      background: var(--ink);
      border-color: var(--ink);
    }

    /* Tečky patří na banner, ne pod text. Popisek je na mobilu v proudu pod
       obrázkem, takže `bottom` by je posadil až pod něj — proto se počítají
       shora z výšky obrázku.

       Banner je přes celou šířku okna a má poměr 1080 : 1350, takže je vysoký
       125 % šířky okna. POZOR: tohle číslo musí odpovídat `aspect-ratio`
       u `.bob-hero__img` výš. Dokud tam bylo 16:10 (62,5 vw) a grafika se
       mezitím změnila na svislou, seděly tečky uprostřed fotky. */
    .bob-hero-carousel .carousel-indicators {
      top: calc(125vw - var(--sp-8));
      bottom: auto;
    }
  }

  /* --- Ovládání karuselu --------------------------------------------------- */
  .carousel-control-prev,
  .carousel-control-next {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: var(--r-pill);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur) var(--ease), background var(--dur-fast) var(--ease);
  }

  .bob-hero-carousel:hover .carousel-control-prev,
  .bob-hero-carousel:hover .carousel-control-next,
  .carousel-control-prev:focus-visible,
  .carousel-control-next:focus-visible { opacity: 1; }

  .carousel-control-prev { left: var(--gutter); }
  .carousel-control-next { right: var(--gutter); }

  .carousel-control-prev:hover,
  .carousel-control-next:hover { background: rgba(255, 255, 255, 0.3); }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 18px;
    height: 18px;
    background: no-repeat center / contain;
  }

  .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2 4 8l6 6'/%3E%3C/svg%3E");
  }
  .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 2 6 6-6 6'/%3E%3C/svg%3E");
  }

  /* Na dotykových zařízeních šipky nedávají smysl — nahradí je tečky */
  @media (hover: none) {
    .carousel-control-prev,
    .carousel-control-next { display: none; }
  }

  .carousel-indicators {
    position: absolute;
    inset-inline: 0;
    bottom: var(--sp-4);
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Samotná tečka je malá, ale dotykový cíl kolem ní má plnou velikost —
     proto průhledný rámeček místo zvětšování tečky. */
  .carousel-indicators button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 10px solid transparent;
    background: rgba(255, 255, 255, 0.5) content-box;
    background-clip: content-box;
    box-sizing: content-box;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: width var(--dur) var(--ease-out), background var(--dur-fast) var(--ease);
  }

  .carousel-indicators button.active { width: 26px; background: #fff content-box; background-clip: content-box; }

  .carousel-indicators button:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

  /* Na svislém banneru leží tečky nad spodní hranou fotky, ne na textu */
  @media (max-width: 767.98px) {
    .carousel-indicators { bottom: var(--sp-2); }
  }

  /* --- Široký obrázkový pruh ---------------------------------------------- */
  .bob-hero-wide {
    aspect-ratio: 21 / 6;
    min-height: 180px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  @media (max-width: 767.98px) { .bob-hero-wide { aspect-ratio: 16 / 9; } }

  .fullwidth-image img { width: 100%; height: auto; object-fit: cover; }

  /* --- Vozy na homepage ---------------------------------------------------
     Obal kolem výstupu FacetWP. Sám o sobě nemá .row, takže mřížku dělá až
     tento grid — a dělá ji nezávisle na tom, kolik sloupců si nastaví FacetWP
     ve svém builderu. Automatické rozpouštění (auto-fit) navíc znamená, že
     se počet sloupců řídí dostupnou šířkou, ne breakpointy.               */
  /* Obal kolem výstupu FacetWP.
     ZÁMĚRNĚ to není mřížka: FacetWP si uvnitř vykresluje vlastní .fwpl-layout,
     který mřížkou je. Kdyby mřížkou byl i tenhle obal, celý výpis by se
     vměstnal do jednoho sloupce vnější mřížky — přesně to se stalo po
     nasazení ostrého FacetWP. Počet sloupců se řídí níže, mimo vrstvy. */
  .bob-home-cars { display: block; }

  /* --- Listing skladových vozů -------------------------------------------- */
  .bob-listing { padding-block: var(--section-y); }

  .bob-listing__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
  }

  .bob-listing__title { margin: 0; line-height: 1; }

  /* Počet vozů, volba počtu na stránku a řazení — svisle na střed s nadpisem */
  .bob-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
  }

  /* Ovládací prvky nesmí zbytečně roztahovat řádek */
  .bob-sort .facetwp-facet { margin: 0; }

  /* Počet vozů a řazení drží pohromadě — na mobilu vedle sebe na jednom řádku */
  .bob-sort__counts { white-space: nowrap; }

  .bob-sort__controls {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    max-width: 100%;
  }

  /* Nativní <select> se roztahuje podle nejdelší volby („Rok výroby
     (sestupně)" má 218 px). Na úzkém displeji tím přetekl přes okraj a
     roztáhl celou stránku do strany. Proto se musí umět zúžit. */
  .bob-sort__controls > * { min-width: 0; }
  .bob-sort__controls select { max-width: 100%; }

  @media (max-width: 991.98px) {
    .bob-sort__controls { width: 100%; }
    /* Oba ovladače si dělí řádek rovným dílem */
    .bob-sort__controls > * { flex: 1 1 0; }
    .bob-sort__controls select { width: 100%; }
  }

  @media (min-width: 992px) {
    /* Optické doladění: nadpis má line-height 1, takže jeho dolní dotažnice
       přesahuje pod okraj rámečku a text působí níž, než kde je střed boxu.
       Bez posunu vypadají ovládací prvky posazené příliš vysoko.

       Pozor na past: při align-items: center flexbox centruje MARGIN BOX,
       takže by se z posunu projevila jen polovina. Řádek se proto zarovnává
       od horního okraje a posun se řídí výhradně tímto marginem. */
    .bob-listing__top { align-items: flex-start; }
    .bob-sort { margin-top: 15px; }
  }

  @media (max-width: 991.98px) {
    .bob-listing__top { flex-direction: column; align-items: flex-start; }
    .bob-sort { width: 100%; justify-content: space-between; }
  }

  /* --- Filtrace na mobilu: skrytá, otevírá se tlačítkem ------------------- */
  .bob-filter__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    min-height: 48px;
    margin-bottom: var(--sp-4);
    padding: 0.75rem 1.25rem;
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
  }

  .bob-filter__toggle:hover { background: var(--surface-3); }
  .bob-filter__toggle i { font-size: 1.125rem; color: var(--ink-3); }

  .bob-filter__toggle-arrow { transition: transform var(--dur) var(--ease); }
  .bob-filter__toggle[aria-expanded="true"] .bob-filter__toggle-arrow { transform: rotate(180deg); }

  /* Pod 992 px je panel schovaný, dokud ho uživatel neotevře. Skript
     .js-filter-toggle přepíná třídu na panelu i atribut aria-expanded. */
  @media (max-width: 991.98px) {
    .bob-filter { display: none; margin-bottom: var(--sp-6); position: static; }
    .bob-filter.is-open { display: block; }

    /* Pořadí prvků na mobilu.
       V HTML je filtrace ve vlastním sloupci PŘED výpisem, takže by tlačítko
       vyšlo nad nadpis stránky. Přepnutím obou sloupců na display: contents
       se jejich obsah stane přímými položkami řádku a dá se volně seřadit —
       bez sahání do struktury šablony a bez JavaScriptu. */
    .bob-listing .row {
      display: flex;
      flex-direction: column;
      /* Řádek si kompenzuje odsazení sloupců zápornými okraji. Sloupce tu ale
         přes display: contents mizí i s tím odsazením, takže by obsah zasáhl
         do záporných okrajů a stránka by přetekla do strany. */
      margin-inline: 0;
    }

    .bob-listing .row > aside,
    .bob-listing .row > .col-lg-9 { display: contents; }

    /* Odsazení řídí mezera řádku, ne vlastní marže jednotlivých prvků —
       jinak se sčítají a mezi ovladači a filtrem vznikne díra. */
    .bob-listing .row  { row-gap: var(--sp-4); }
    .bob-listing__top  { margin-bottom: 0; }
    .bob-filter__toggle { margin-bottom: 0; }

    .bob-listing__top    { order: 1; }
    .bob-filter__toggle  { order: 2; }
    .bob-filter          { order: 3; }
    .bob-results         { order: 4; }
    .bob-listing__more   { order: 5; }
  }

  /* --- Číslované stránkování ---------------------------------------------- */
  .bob-listing__more {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-10);
  }

  /* Mřížka výsledků.
     FacetWP si počet sloupců generuje sám do třídy s náhodným jménem; tímhle
     pravidlem je layout na tom nastavení nezávislý a nemusí se sahat do
     administrace. Platí pro obě varianty výstupu (ostrý FacetWP i náhrada). */
  .bob-results .fwpl-layout,
  .bob-results .facetwp-template > .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  @media (min-width: 576px) { .bob-results .fwpl-layout { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .bob-results .fwpl-layout { grid-template-columns: repeat(3, 1fr); } }

  /* Vnitřní obaly FacetWP jen protáhnout, ať kartu neomezují */
  .bob-results .fwpl-result,
  .bob-results .fwpl-row,
  .bob-results .fwpl-col,
  .bob-results .fwpl-item,
  .bob-home-cars .fwpl-result,
  .bob-home-cars .fwpl-row,
  .bob-home-cars .fwpl-col,
  .bob-home-cars .fwpl-item,
  .bob-article__content .fwpl-result,
  .bob-article__content .fwpl-row,
  .bob-article__content .fwpl-col,
  .bob-article__content .fwpl-item { height: 100%; min-width: 0; }

  .bob-results .fwpl-row { display: block; }

  /* --- Široké CTA ---------------------------------------------------------- */
  .bob-cta-wide { padding-block: var(--section-y); }

  .bob-cta-box {
    display: flex;
    flex-wrap: wrap;
    background: var(--ink);
    border-radius: var(--r-xl);
    overflow: hidden;
    color: #fff;
  }

  .bob-cta-content { flex: 1 1 22rem; display: flex; min-width: 0; }

  /* Na desktopu dostane text víc místa, aby se nadpis vešel na dva řádky.
     Při dělení půl na půl chybělo textovému sloupci pár desítek pixelů
     a druhý řádek se lámal. */
  @media (min-width: 992px) {
    .bob-cta-content { flex: 0 0 58%; }
    .bob-cta-image   { flex: 1 1 auto; }
  }

  .bob-cta-inner {
    display: flex;
    /* Bez min-width: 0 se flexový prvek nesmrskne pod šířku svého nejširšího
       nezalomitelného obsahu (tlačítka) a na úzkém displeji vyleze z boxu —
       text pak končí přesně na jeho hraně, bez odsazení vpravo. */
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--sp-6);
    padding: clamp(2rem, 1rem + 4vw, 4rem);
  }

  .bob-cta-title {
    color: #fff;
    margin: 0;
    /* Vlastní stupnice, ne --fs-h2. Při 40 px se text „Rezervujte si testovací
       jízdu ještě dnes. Jsme tady pro vás!" lámal do tří řádků; 34 px ho
       spolehlivě udrží na dvou i v užším sloupci CTA. */
    font-size: clamp(1.375rem, 1.05rem + 1.25vw, 2.125rem);
    /* Nadpis má vlastní zalomení přes <br>. Vyvažování řádků, které dědí
       od ostatních nadpisů, ho ale rozhodí do tří řádků — proto se tady
       ruší a zalomení řídí výhradně značka v textu.
       Pozor: platná hodnota je „wrap", ne „normal" (ta se zahodí jako
       neplatná a vyvažování zůstane zapnuté). */
    text-wrap: wrap;
  }

  .bob-cta-box .btn-outline-dark,
  .bob-cta-box .bob-btn-outline {
    --btn-fg: #fff;
    --btn-bd: rgba(255, 255, 255, 0.4);
    --btn-bg-h: #fff;
  }
  .bob-cta-box .btn-outline-dark:hover,
  .bob-cta-box .bob-btn-outline:hover { color: var(--ink); }

  .bob-cta-image { flex: 1 1 18rem; min-height: 260px; min-width: 0; }
  .bob-cta-img { width: 100%; height: 100%; object-fit: cover; }

  /* --- CTA banner na mobilu ------------------------------------------------
     Text nahoře, fotka pod ním v pevném poměru stran. Bez omezení poměru se
     fotka na úzkém displeji protáhne do nesmyslné výšky.                   */
  @media (max-width: 767.98px) {
    .bob-cta-box { border-radius: var(--r-lg); }

    .bob-cta-inner {
      align-items: center;
      text-align: center;
      gap: var(--sp-6);
      padding: var(--sp-10) var(--sp-6);
    }

    .bob-cta-title { font-size: clamp(1.375rem, 1.05rem + 2.2vw, 1.875rem); }

    /* Tlačítko přes celou šířku — na dotykovém displeji se lépe trefuje */
    .bob-cta-inner .btn { width: 100%; }

    .bob-cta-image { min-height: 0; }
    .bob-cta-img { aspect-ratio: 16 / 10; height: auto; }
  }

  /* --- Článek -------------------------------------------------------------- */
  .bob-article { padding-block: var(--section-y); }

  .bob-article__container { max-width: 46rem; }

  .bob-article__header { margin-bottom: var(--sp-8); }

  .bob-article__title { margin-bottom: var(--sp-3); }

  .bob-article__meta {
    font-size: var(--fs-sm);
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
  }

  .bob-article__content { font-size: var(--fs-lead); line-height: 1.7; }
  .bob-article__content > * + * { margin-top: var(--sp-5); }
  .bob-article__content h2 { margin-top: var(--sp-10); }
  .bob-article__content h3 { margin-top: var(--sp-8); }
  .bob-article__content img { border-radius: var(--r-md); }
  .bob-article__content ul { padding-left: 1.25rem; list-style: disc; }
  .bob-article__content li + li { margin-top: var(--sp-2); }

  /* Pravidla nad tímhle komentářem platí pro text článku, jenže se propisovala
     i do karty vozu vložené shortcodem: nadpis karty dostal 32 px mezeru navíc,
     štítky s parametry odrážky a rozestupy, fotka jiné zaoblení. Karta pak
     vypadala jinak než v přehledu skladových vozů, přestože je to tentýž kód.
     Musí to stát tady, ve stejné vrstvě — z vrstvy `components` by to prohrálo
     bez ohledu na specificitu. */
  .bob-article__content .stock-card__title { margin-top: 0; }

  .bob-article__content .stock-card__specs {
    padding-left: 0;
    list-style: none;
  }

  .bob-article__content .stock-card__specs li + li { margin-top: 0; }

  .bob-article__content .stock-card__img { border-radius: 0; }

  /* Výpis vozů v akci ze shortcodu [bofb_akcni_vozy]. Mřížka je stejná jako
     u výpisu skladu — karta je tatáž komponenta, jen ji sem nevkládá FacetWP. */
  .bob-akcni-vozy {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    margin-top: var(--sp-10);
  }

  @media (min-width: 768px) {
    .bob-akcni-vozy { grid-template-columns: repeat(2, 1fr); }
  }

  /* --- Lepivá lišta akcí na mobilu ----------------------------------------
     U autosalonu je nejčastější akce zavolat. Na mobilu je proto telefon
     stále po ruce, aniž by uživatel musel scrollovat zpátky nahoru.        */
  .bob-actionbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border-top: 1px solid var(--line);
  }

  @media (min-width: 992px) { .bob-actionbar { display: none; } }

  /* Odsazení kvůli liště je mezi přepisy na konci souboru — WordPress vkládá
     do stránky nevrstvené pravidlo body { padding: 0 }, které by tohle přebilo. */

  .bob-actionbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 48px;
    padding-inline: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--r-pill);
  }

  .bob-actionbar a:first-child { background: var(--ink); color: #fff; }
  .bob-actionbar a + a { background: var(--surface-3); color: var(--ink); }

  /* --- Patička -------------------------------------------------------------- */
  .bob-footer {
    margin-top: auto;
    padding-top: var(--section-y);
    background: var(--inverse);
    color: rgba(255, 255, 255, 0.7);
  }

  .bob-footer h2,
  .bob-footer h3,
  .bob-footer .widget-title { color: #fff; font-size: var(--fs-h4); margin-bottom: var(--sp-4); }

  .bob-footer a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
  .bob-footer a:hover { color: #fff; }

  .bob-footer__bottom {
    margin-top: var(--sp-12);
    padding-block: var(--sp-6);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--fs-sm);
  }
}


/* =============================================================================
   ODHALOVÁNÍ PŘI SCROLLU
   Skript scroll-reveal.js přidá na <html> třídu .has-smooth-scroll a jednotlivým
   prvkům .js-reveal → .is-revealed. Skrytý stav je ZÁMĚRNĚ podmíněný tou třídou
   na <html>: když se skript nenačte nebo uživatel chce omezený pohyb, obsah je
   vidět okamžitě a nemůže se stát, že by stránka zůstala prázdná.
   ========================================================================== */

@layer components {
  .has-smooth-scroll .js-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .has-smooth-scroll .js-reveal.is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .has-smooth-scroll .js-reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}


/* =============================================================================
   PATIČKA — detaily
   ========================================================================== */

@layer components {
  .footer-brand {
    display: flex;
    justify-content: center;
    padding-bottom: var(--sp-16);
  }

  .footer-brand__link {
    display: inline-block;
    transition: opacity var(--dur-fast) var(--ease);
  }
  .footer-brand__link:hover { opacity: 0.75; }

  .footer-brand__img {
    width: 100%;
    max-width: 34rem;
    height: auto;
  }

  /* --- Patička na mobilu --------------------------------------------------
     Kontaktní bloky mají v šabloně mb-5 a k tomu ještě mezeru mřížky — ve
     sloupci pod sebou z toho vznikly propastné díry. Na úzkém displeji je
     proto vertikální odsazení řízené odsud, ne utilitami.                 */
  @media (max-width: 991.98px) {
    .footer-brand__img { max-width: 20rem; }

    .bob-footer .row { row-gap: var(--sp-8); }
    .bob-footer .footer-content-site { margin-bottom: 0; }
  }

  .footer-content-site h3 { font-size: var(--fs-h4); }
  .footer-content-site p  { font-size: var(--fs-sm); }

  /* Odkaz musí být inline-flex — obrázky mají z resetu display:block a samotné
     zarovnání textu na rodiči by je na mobilu nevystředilo. */
  .footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--r-pill);
    transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }

  .footer-social:hover { background: rgba(255, 255, 255, 0.1); }

  .footer-socials { display: flex; gap: var(--sp-2); }
  @media (max-width: 991.98px) { .footer-socials { justify-content: center; } }
  /* Ikony NEJSOU čtvercové (Facebook má 21×39, Instagram 39×39). Vnucení
     stejné šířky i výšky Facebook roztáhlo — proto se řídí jen výška
     a šířka se dopočítá z poměru stran. */
  .footer-social img {
    width: auto;
    height: 28px;
    max-width: 100%;
    object-fit: contain;
  }

  .footer-rule {
    margin-block: var(--sp-8);
    background: rgba(255, 255, 255, 0.14);
  }

  /* --- Spodní pruh -------------------------------------------------------- */
  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding-bottom: var(--sp-10);
  }

  .footer-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4) var(--sp-5);
  }

  /* Bez flex-shrink: 0 se loga na úzkém displeji zmáčkla na pár pixelů šířky
     a vypadala jako tmavé proužky — flexbox je zúžil, aby se vešla do řádku. */
  .footer-logos__link {
    display: inline-flex;
    flex-shrink: 0;
    transition: opacity var(--dur-fast) var(--ease);
  }
  .footer-logos__link:hover { opacity: 0.7; }

  .footer-logos__img { width: auto; flex-shrink: 0; }
  .footer-logos__img--daspol { height: 30px; }
  .footer-logos__img--bob    { height: 22px; }

  .footer-logo-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.22);
  }

  .footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-nav a {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
  }
  .footer-nav a:hover { color: #fff; }

  /* Na úzkém displeji vše na střed a pod sebe */
  @media (max-width: 767.98px) {
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-nav ul { justify-content: center; }
    .footer-brand { padding-bottom: var(--sp-10); }
  }
}


/* =============================================================================
   MODAL
   Otevírá se přes kotvu (href="#modal-…"), takže je řízený :target — žádný JS.
   Bez tohoto pravidla by se obsah modalu vypisoval rovnou do stránky; přesně
   to se dělo poté, co se přestal načítat starý framework.
   ========================================================================== */

@layer components {
  /* Zavřený modal se ZCELA vyřazuje z rozvržení (display: none), ne pouze
     skrývá přes visibility/opacity.
     Důvod: visibility se dědí, ale potomek si ji může vrátit zpět na visible —
     a přesně to dělá WPForms svým polím. Formulář uvnitř zavřeného modalu pak
     zůstal neviditelný, ale dál chytal kliknutí přes celou stránku (1440×900
     px pevně umístěné plochy) a kurzor se nad kartami měnil na „psaní".
     S display: none nemá co přebít a prvky zároveň vypadnou z pořadí
     tabulátoru, což je správně i z hlediska přístupnosti. */
  .modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    place-items: center;
    padding: var(--sp-4);
  }

  .modal:target {
    display: grid;
    animation: modal-in var(--dur) var(--ease) both;
  }

  @keyframes modal-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 12, 14, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .modal__dialog {
    position: relative;
    width: min(40rem, 100%);
    max-height: min(85vh, 52rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
  }

  .modal:target .modal__dialog {
    animation: modal-dialog-in var(--dur) var(--ease-out) both;
  }

  @keyframes modal-dialog-in {
    from { transform: translateY(12px) scale(0.985); }
    to   { transform: none; }
  }

  .modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
  }

  /* Odsazení si drží komponenta sama. Šablony měly navíc utilitu p-4, která
     ho přebíjela — utility jsou v kaskádě až za komponentami. */
  .modal__dialog { padding: var(--sp-5) var(--sp-6) var(--sp-6); }

  .modal__title { font-size: var(--fs-h3); margin: 0; }

  .modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
    color: var(--ink-3);
    background: var(--surface-3);
    border-radius: var(--r-pill);
    text-decoration: none;
  }
  .modal__close:hover { background: var(--ink); color: #fff; }
}


/* =============================================================================
   PLOVOUCÍ PRVKY — rychlé akce a návrat nahoru
   ========================================================================== */

@layer components {
  .floating-actions {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    gap: 1px;
    transform: translateY(-50%);
    border-radius: var(--r-md) 0 0 var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-md);
  }

  .floating-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--surface);
    transition: background var(--dur-fast) var(--ease);
  }

  .floating-actions__btn img { width: 22px; height: 22px; }
  .floating-actions__btn:hover { background: var(--surface-3); }

  /* Na mobilu by lišta překrývala obsah — tam slouží spodní lišta akcí */
  @media (max-width: 767.98px) { .floating-actions { display: none; } }

  .btn-scroll-top {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: var(--z-sticky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-md);
    text-decoration: none;
  }

  /* Při najetí se šipka nadzvedne a za ní projede druhá zespoda — vypadá to,
     že obsah odjíždí nahoru. Samotná změna barvy působila neživě. */
  .btn-scroll-top {
    overflow: hidden;
    transition: background var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
  }

  .btn-scroll-top:hover,
  .btn-scroll-top:focus-visible {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    transform: translateY(-3px);
    box-shadow: var(--sh-lg);
  }

  .btn-scroll-top:active { transform: translateY(-1px); }

  .btn-scroll-top-tooltip { display: none; }

  /* Okénko o velikosti jedné ikony. Ořez musí být TADY, ne na tlačítku —
     tlačítko je vyšší než ikona, takže by druhou šipku neschovalo a byly
     by vidět obě naráz. */
  .btn-scroll-top-icon {
    position: relative;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    overflow: hidden;
    font-size: 1.25rem;
    line-height: 1.25rem;
    transition: transform var(--dur) var(--ease-out);
  }

  .btn-scroll-top-icon::before {
    display: block;
    line-height: 1.25rem;
  }

  /* Druhá šipka čeká pod okénkem a při najetí nastoupí na místo první */
  .btn-scroll-top-icon::after {
    content: "\ea57";                 /* bx-chevron-up */
    font-family: "boxicons", sans-serif;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    line-height: 1.25rem;
    text-align: center;
  }

  .btn-scroll-top:hover .btn-scroll-top-icon,
  .btn-scroll-top:focus-visible .btn-scroll-top-icon {
    transform: translateY(-100%);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn-scroll-top:hover { transform: none; }
    .btn-scroll-top:hover .btn-scroll-top-icon { transform: none; }
  }

  @media (max-width: 767.98px) { .btn-scroll-top { display: none; } }
}


/* =============================================================================
   DETAIL VOZIDLA
   ========================================================================== */

@layer components {

  .bob-vd { padding-block: var(--sp-8) var(--sp-10); }

  /* Vlevo galerie, vpravo panel s cenou. Pod 992 px jde panel pod galerii. */
  .bob-vd__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  @media (min-width: 992px) {
    .bob-vd__layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--sp-10); }
  }

  /* --- Galerie ------------------------------------------------------------ */
  .bob-vd__mainphoto {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }

  /* Fotky se do rámečku vepisují, nikdy neořezávají — u vozu chceme vidět celý */
  .bob-vd__photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .bob-vd__mainphoto:hover .bob-vd__photo { transform: scale(1.02); }

  .bob-vd__photo--empty { background: var(--surface-3); }

  .bob-vd__photocount {
    position: absolute;
    bottom: var(--sp-3);
    right: var(--sp-3);
    padding: 0.375rem 0.75rem;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: #fff;
    background: rgba(11, 12, 14, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: var(--r-pill);
  }

  .bob-vd__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    margin: var(--sp-3) 0 0;
    padding: 0;
    list-style: none;
  }

  .bob-vd__thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color var(--dur-fast) var(--ease);
  }

  .bob-vd__thumb:hover { border-color: var(--ink); }

  /* Poslední náhled nese počet zbývajících fotek */
  .bob-vd__more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    color: #fff;
    background: rgba(11, 12, 14, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .bob-vd__hiddenphotos { display: none; }

  /* --- Panel s cenou ------------------------------------------------------ */
  @media (min-width: 992px) {
    .bob-vd__panel {
      position: sticky;
      top: calc(var(--header-h) + var(--sp-4));
    }
  }

  .bob-vd__panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
  }

  .bob-vd__title { margin: 0; font-size: var(--fs-h2); }

  .bob-vd__chips,
  .bob-vd__sale {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bob-vd__prices { display: flex; flex-direction: column; gap: 0.125rem; }

  .bob-vd__priceOld {
    font-size: var(--fs-sm);
    color: var(--ink-4);
    text-decoration: line-through;
  }

  .bob-vd__price {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
    font-weight: 750;
    letter-spacing: var(--tracking-head);
    color: var(--ink);
    line-height: 1.15;
  }

  .bob-vd__price span { font-size: var(--fs-body); font-weight: 500; color: var(--ink-3); }

  .bob-vd__priceSub { font-size: var(--fs-sm); color: var(--ink-3); }

  .bob-vd__actions { display: flex; flex-direction: column; gap: var(--sp-2); }

  .bob-vd__call {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--ink);
    transition: background var(--dur-fast) var(--ease);
  }

  .bob-vd__call:hover { background: var(--surface-3); color: var(--ink); }
  .bob-vd__call i { font-size: 1.375rem; color: var(--ink-3); }
  .bob-vd__call span { display: block; }
  .bob-vd__call-label { font-size: var(--fs-xs); color: var(--ink-3); }
  .bob-vd__call-num { font-weight: 650; font-variant-numeric: tabular-nums; }

  .bob-vd__vin {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--ink-4);
    word-break: break-all;
  }

  /* --- Sekce pod hlavní částí --------------------------------------------- */
  .bob-vd__section { padding-block: var(--section-y); }
  .bob-vd__section--alt { background: var(--surface); }

  /* V sekci na bílém pozadí musí mít dlaždice odlišný podklad */
  .bob-vd__section--alt .bob-vd__param { background: var(--canvas); }

  .bob-vd__h2 { margin-bottom: var(--sp-8); }

  /* --- Parametry ----------------------------------------------------------- */
  /* Každý parametr jako samostatná dlaždice s názvem NAD hodnotou.
     Ve dvousloupcovém zápisu (název vlevo, hodnota vpravo) splývala hodnota
     jednoho parametru s názvem toho vedle — četlo se to jako jedna věta. */
  /* Parametrů je osm. Na desktopu mají být v jedné řadě, proto pevný počet
     sloupců místo automatického rozpouštění — to při osmi položkách vycházelo
     na 7 + 1 a poslední dlaždice zůstala osamocená na druhém řádku. */
  .bob-vd__params {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    margin: 0;
  }

  @media (min-width: 576px)  { .bob-vd__params { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 992px)  { .bob-vd__params { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

  .bob-vd__param {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    min-width: 0;
  }

  .bob-vd__param dt {
    font-size: 0.6875rem;
    font-weight: 650;
    text-transform: uppercase;
    /* Užší prostrkání, aby se delší popisky („OBJEM MOTORU") vešly */
    letter-spacing: 0.04em;
    color: var(--ink-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bob-vd__param dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: var(--tracking-head);
    color: var(--ink);
    /* Delší hodnoty („Předváděcí vozy") se smí zalomit, ať nepřetečou */
    overflow-wrap: break-word;
  }

  /* --- Ikony výbavy -------------------------------------------------------- */
  .bob-vd__icons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bob-vd__iconItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-3);
    text-align: center;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
  }

  /* Bez pevné velikosti by vložené SVG bez rozměrů zabralo tisíce pixelů */
  .bob-vd__iconSvg {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .bob-vd__iconSvg svg {
    width: 100%;
    height: 100%;
    max-width: 44px;
    max-height: 44px;
  }

  .bob-vd__iconLabel {
    font-size: var(--fs-xs);
    font-weight: 550;
    line-height: 1.35;
    color: var(--ink-2);
  }

  /* --- Další výbava -------------------------------------------------------- */
  .bob-vd__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--sp-2) var(--sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bob-vd__list li {
    position: relative;
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--line);
  }

  .bob-vd__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95em;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(-45deg);
  }

  .bob-vd__note {
    font-size: var(--fs-lead);
    line-height: 1.7;
    color: var(--ink-2);
  }

  /* --- Lišta akcí na detailu ----------------------------------------------- */
  .bob-actionbar--vd { grid-auto-columns: auto 1fr 1fr; }

  .bob-actionbar__price {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 750;
    color: var(--ink);
    white-space: nowrap;
  }
}


/* =============================================================================
   ÚVODNÍ PRUH VNITŘNÍ STRÁNKY
   ========================================================================== */

@layer sections {

  .bob-page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(15rem, 10rem + 18vw, 24rem);
    padding-block: var(--sp-12);
    overflow: hidden;
    background: var(--inverse);
    color: #fff;
  }

  .bob-page-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* Přechod zajišťuje čitelnost textu na jakékoli fotce — bez něj by se
       na světlém snímku bílý nadpis ztratil. */
    -webkit-mask-image: none;
  }

  .bob-page-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(11, 12, 14, 0.86) 0%,
                rgba(11, 12, 14, 0.45) 55%,
                rgba(11, 12, 14, 0.25) 100%);
  }

  .bob-page-hero__content { position: relative; z-index: 1; }

  .bob-page-hero__title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-h1);
    color: #fff;
  }

  .bob-page-hero__lead {
    max-width: none;
    margin: 0;
    font-size: var(--fs-lead);
    color: rgba(255, 255, 255, 0.86);
  }

  /* Bez fotky se z pruhu stane prostá tmavá hlavička */
  .bob-page-hero--plain { min-height: 0; padding-block: var(--sp-12); }

  /* Varianta, kde je pruh jen obrázek (servis). Musí být tady ve stejné vrstvě
     jako .bob-page-hero — jinak by ho přebilo min-height a kolem obrázku by
     zůstaly tmavé pruhy. */
  .bob-page-hero:has(> .bob-page-hero__img) {
    display: block;
    min-height: 0;
    padding: 0;
  }


  /* ===========================================================================
     PŘEHLED MODELŮ
     ======================================================================== */

  .bob-models { padding-block: var(--section-y); }

  .bob-model-group + .bob-model-group { margin-top: var(--sp-16); }

  /* --- Pruh skupiny --------------------------------------------------------- */
  .bob-model-group__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(11rem, 8rem + 12vw, 17rem);
    margin-bottom: var(--sp-8);
    padding: var(--sp-8);
    background-size: cover;
    background-position: center;
    border-radius: var(--r-xl);
    overflow: hidden;
    color: #fff;
  }

  .bob-model-group__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(11, 12, 14, 0.82) 0%,
                rgba(11, 12, 14, 0.35) 60%,
                rgba(11, 12, 14, 0.1) 100%);
  }

  .bob-model-group__inner { position: relative; z-index: 1; }

  /* Bílé logo značky nad nadpisem. Výška je pevná, šířka dopočítaná — loga
     Range Roveru, Defenderu a Discovery mají hodně rozdílný poměr stran. */
  .bob-model-group__eyebrow {
    display: block;
    height: 22px;
    width: auto;
    margin-bottom: var(--sp-4);
  }

  @media (max-width: 575.98px) {
    .bob-model-group__eyebrow { height: 16px; }
  }

  .bob-model-group__title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-h2);
    color: #fff;
  }

  .bob-model-group__sub {
    margin: 0;
    font-size: var(--fs-lead);
    color: rgba(255, 255, 255, 0.84);
  }

  /* --- Dlaždice modelů ------------------------------------------------------ */
  .bob-model-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Počet sloupců na širokém displeji si určuje šablona přes --sloupce podle
     toho, kolik modelů skupina má. U dvoučlenné řady (Discovery) by pevných
     pět sloupců nechalo tři pole prázdná. */
  @media (min-width: 640px) {
    .bob-model-links { grid-template-columns: repeat(min(var(--sloupce, 4), 3), minmax(0, 1fr)); }
  }
  @media (min-width: 992px) {
    .bob-model-links { grid-template-columns: repeat(var(--sloupce, 4), minmax(0, 1fr)); }
  }

  .bob-model-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    height: 100%;
    padding: var(--sp-4) var(--sp-3) var(--sp-5);
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease);
  }

  .bob-model-card:hover,
  .bob-model-card:focus-visible {
    color: var(--ink);
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
    border-color: transparent;
  }

  /* Náhledy modelů jsou ateliérové snímky na bílém — vepisují se do rámečku,
     aby se z vozu nic neuřízlo, a bílé okolí splyne s kartou. */
  .bob-model-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  .bob-model-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .bob-model-card:hover .bob-model-card__img { transform: scale(1.05); }

  .bob-model-card__name {
    margin-top: auto;
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: var(--tracking-head);
    line-height: 1.3;
  }
}


/* =============================================================================
   DETAIL MODELOVÉ ŘADY
   ========================================================================== */

@layer sections {

  /* --- Úvodní pruh ---------------------------------------------------------- */
  .bob-model-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(20rem, 14rem + 24vw, 34rem);
    padding-block: var(--sp-16) var(--sp-12);
    overflow: hidden;
    background: var(--inverse);
    color: #fff;
  }

  .bob-model-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
  }

  /* Přechod drží nadpis čitelný i na světlé fotce vozu */
  .bob-model-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(11, 12, 14, 0.88) 0%,
                rgba(11, 12, 14, 0.40) 55%,
                rgba(11, 12, 14, 0.15) 100%);
  }

  .bob-model-hero__content { position: relative; z-index: 1; }

  .bob-model-hero__eyebrow {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-2xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.7);
  }

  .bob-model-hero__title {
    margin: 0;
    max-width: 20ch;
    font-size: var(--fs-h1);
    color: #fff;
  }

  .bob-model-hero__price {
    display: inline-block;
    margin: var(--sp-6) 0 0;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
    background: #fff;
    border-radius: var(--r-pill);
    box-shadow: var(--sh-md);
  }

  /* --- Úvod ----------------------------------------------------------------- */
  .bob-model-intro { padding-block: var(--section-y); }

  .bob-model-intro__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  @media (min-width: 992px) {
    .bob-model-intro__layout {
      grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
      gap: var(--sp-16);
      align-items: start;
    }
  }

  .bob-model-intro__title { margin: 0 0 var(--sp-4); }

  .bob-model-intro__lead {
    margin: 0;
    max-width: none;
    font-size: var(--fs-body);
    color: var(--ink-3);
    line-height: 1.75;
  }

  .bob-model-intro__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }

  /* --- Obsah ---------------------------------------------------------------- */
  .bob-model-body { padding-bottom: var(--section-y); }

  .bob-model-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-16);
  }

  @media (min-width: 768px) {
    .bob-model-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bob-model-gallery__wide { grid-column: 1 / -1; }
  }

  .bob-model-gallery figure { margin: 0; }

  .bob-model-gallery__wide,
  .bob-model-gallery__half,
  .bob-model-split__media {
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--surface-3);
  }

  .bob-model-gallery__wide { aspect-ratio: 21 / 9; }
  .bob-model-gallery__half { aspect-ratio: 4 / 3; }

  .bob-model-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .bob-model-gallery figure:hover .bob-model-gallery__img,
  .bob-model-split__media:hover .bob-model-gallery__img { transform: scale(1.03); }

  /* --- Textové bloky --------------------------------------------------------- */
  .bob-model-texts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    margin-bottom: var(--sp-16);
  }

  @media (min-width: 768px) {
    .bob-model-texts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
  }

  .bob-model-text__title { margin: 0 0 var(--sp-4); font-size: var(--fs-h3); }

  .bob-model-text__body {
    margin: 0;
    max-width: none;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--ink-3);
  }

  /* --- Fotka vlevo, texty vpravo ---------------------------------------------- */
  .bob-model-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    align-items: start;
  }

  @media (min-width: 992px) {
    .bob-model-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
  }

  .bob-model-split__media { aspect-ratio: 4 / 5; }

  @media (max-width: 991.98px) {
    .bob-model-split__media { aspect-ratio: 4 / 3; }
  }

  .bob-model-split__texts { display: flex; flex-direction: column; gap: var(--sp-10); }
}


/* =============================================================================
   OBSAHOVÉ PRVKY VNITŘNÍCH STRÁNEK
   Sdílené servisem, financováním, výkupem vozu a stránkou o nás. Každá z nich
   používá stejné stavební prvky, jen v jiném pořadí.
   ========================================================================== */

@layer components {

  /* --- Typografické pomůcky ze starých šablon ----------------------------- */
  .bob-section-title,
  .bob-h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }

  .bob-h4 { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }

  /* Všechny odstavce mají stejnou velikost. Zvětšený „úvodní" odstavec
     text jen roztrhal do dvou vah, aniž by cokoli zdůraznil. */
  .bob-section-lead,
  .bob-p-lg,
  .bob-p {
    max-width: none;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--ink-3);
  }

  .bob-section-lead + .bob-section-lead,
  .bob-p + .bob-p { margin-top: var(--sp-4); }

  /* --- Úvodní sekce: text vlevo, tlačítka vpravo -------------------------- */
  .bob-page-intro,
  .bob-fin-intro,
  .bob-buyback-intro,
  .bob-about-intro { padding-block: var(--section-y); }

  /* Tlačítka jdou POD text, ne do sloupce vedle něj.
     V bočním sloupci vznikala vpravo velká prázdná plocha a nadpis s odstavcem
     se navíc tiskly k sobě, protože sloupce byly svisle centrované. */
  .bob-page-intro .row,
  .bob-fin-intro .row,
  .bob-buyback-intro .row,
  .bob-about-intro .row {
    display: block;
    margin-inline: 0;
  }

  .bob-page-intro .row > *,
  .bob-fin-intro .row > *,
  .bob-buyback-intro .row > *,
  .bob-about-intro .row > * {
    width: auto;
    max-width: none;
    padding-inline: 0;
  }

  .bob-page-intro h1,
  .bob-page-intro h2,
  .bob-fin-intro h2,
  .bob-buyback-intro h2,
  .bob-about-intro h2 { margin-bottom: var(--sp-5); }

  .bob-cta-stack {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
    padding: 0;
    background: none;
    border: 0;
  }

  /* Na širokém displeji vedle sebe podle obsahu, na mobilu pod sebou */
  .bob-cta-stack .btn { width: 100%; }

  @media (min-width: 640px) {
    .bob-cta-stack .btn { width: auto; min-width: 14rem; }
  }

  /* --- Sekce s kartami ----------------------------------------------------- */
  .bob-fin-benefits,
  .bob-fin-options,
  .bob-fin-steps,
  .bob-fin-docs,
  .bob-buyback-benefits,
  .bob-buyback-steps,
  .bob-buyback-docs,
  .bob-about-why,
  .bob-about-csr,
  .bob-service-grid { padding-block: var(--section-y); }

  /* Sudé sekce na bílém podkladu, ať stránka nesplývá do jedné plochy */
  .bob-fin-options,
  .bob-buyback-steps,
  .bob-about-why { background: var(--surface); }

  /* --- Informační karta ----------------------------------------------------- */
  .bob-info-card,
  .bob-option,
  .bob-feature,
  .bob-doc-box {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    height: 100%;
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }

  /* Na bílé sekci potřebují karty odlišný podklad */
  .bob-fin-options .bob-option,
  .bob-about-why .bob-feature { background: var(--canvas); }

  .bob-info-card__title,
  .bob-option__title,
  .bob-feature__title {
    margin: 0;
    font-size: var(--fs-h4);
  }

  .bob-info-card__text,
  .bob-option__text,
  .bob-feature__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-3);
  }

  .bob-option__eyebrow {
    font-size: var(--fs-2xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-4);
  }

  /* --- Odrážkový seznam s fajfkou ------------------------------------------ */
  .bob-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: auto 0 0;
    padding: var(--sp-4) 0 0;
    list-style: none;
    border-top: 1px solid var(--line);
  }

  .bob-list li {
    position: relative;
    padding-left: var(--sp-6);
    font-size: var(--fs-sm);
    color: var(--ink-2);
  }

  .bob-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(-45deg);
  }

  /* --- Očíslované kroky ------------------------------------------------------ */
  .bob-step {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    height: 100%;
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }

  .bob-buyback-steps .bob-step { background: var(--canvas); }

  .bob-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 750;
    color: #fff;
    background: var(--ink);
    border-radius: var(--r-pill);
  }

  .bob-step__title { margin: 0; font-size: var(--fs-h4); }

  .bob-step__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-3);
  }

  /* --- Mřížky bez bootstrapových sloupců ------------------------------------ */
  /* Počet sloupců se řídí ŠÍŘKOU MŘÍŽKY, ne šířkou okna. Tyhle mřížky totiž
     stojí jednou přes celou stránku a jindy v polovičním sloupci vedle textu —
     pevný počet sloupců by je tam zmáčkl do nečitelně úzkých proužků. */
  .bob-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* --- Obrázky v obsahu ------------------------------------------------------ */
  .bob-media {
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--surface-3);
  }

  .bob-media__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .bob-media:hover .bob-media__img { transform: scale(1.03); }

  .bob-media__img--wide   { aspect-ratio: 21 / 9; }
  .bob-media__img--half   { aspect-ratio: 4 / 3; }
  .bob-media__img--square { aspect-ratio: 1 / 1; }
  .bob-media--tall .bob-media__img { aspect-ratio: 4 / 5; }

  @media (max-width: 991.98px) {
    .bob-media--tall .bob-media__img { aspect-ratio: 4 / 3; }
  }

  .bob-galleries { display: grid; gap: var(--sp-4); }

  /* --- Bloky textu pod sebou -------------------------------------------------- */
  .bob-text-stack { display: flex; flex-direction: column; gap: var(--sp-8); }

  .bob-text-block { max-width: none; }

  .bob-service-grid__middle,
  .bob-service-grid__bottom { margin-top: var(--sp-16); }

  .bob-service-grid__images { margin-bottom: var(--sp-8); }

  /* --- Sekce „Co si připravit" / „Co budeme potřebovat" -------------------
     Text nahoře přes celou šířku, seznam pod ním ve dvou sloupcích. Dřív
     stály vedle sebe, takže vlevo byl krátký odstavec a vpravo vysoký box —
     půlka sekce zela prázdnotou. */
  .bob-buyback-docs .row,
  .bob-fin-docs .row {
    display: block;
    margin-inline: 0;
  }

  .bob-buyback-docs .row > *,
  .bob-fin-docs .row > * {
    width: auto;
    max-width: none;
    padding-inline: 0;
  }

  .bob-buyback-docs .bob-doc-box,
  .bob-fin-docs .bob-doc-box { margin-top: var(--sp-6); }

  .bob-buyback-docs .bob-list,
  .bob-fin-docs .bob-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--sp-3) var(--sp-8);
    /* Uvnitř tohoto boxu je seznam jediným obsahem — linka nad ním, kterou
       dědí z karty s variantami, by tu vypadala jako chyba. */
    margin: 0;
    padding: 0;
    border-top: 0;
  }

  /* Servis má úvodní pruh jako prostý obrázek bez textu */
  .bob-page-hero__img {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 7;
    object-fit: cover;
  }

  @media (max-width: 767.98px) { .bob-page-hero__img { aspect-ratio: 16 / 10; } }

  /* Původní názvy z dřívějších šablon.
     POZOR: používají se ve DVOU různých kontextech — jednou uvnitř tmavého
     úvodního pruhu, podruhé v běžné sekci na světlém podkladu. Barva se proto
     nesmí nastavovat natvrdo; ve výchozím stavu je tmavá a bílá jen v pruhu.
     Natvrdo bílá znamenala bílý nadpis na bílém pozadí na stránce servisu. */
  .bob-page-title { font-size: var(--fs-h1); color: var(--ink); }

  .bob-page-lead {
    max-width: none;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--ink-3);
  }

  .bob-page-hero .bob-page-title { color: #fff; }
  .bob-page-hero .bob-page-lead { max-width: none; color: rgba(255, 255, 255, 0.86); }

  /* Sekce akcí a novinek — na samostatné stránce i na homepage.
     Odsazení dřív dodávaly utility v šabloně (py-5 mt-5); teď si ho drží
     sekce sama, aby se nelišilo stránku od stránky. */
  .bob-news,
  .offers,
  .stock-cars,
  .services { padding-block: var(--section-y); }


  /* ===========================================================================
     KONTAKTY
     ======================================================================== */

  .bob-contact-map-form,
  .bob-contact-departments { padding-block: var(--section-y); }

  .bob-map-meta {
    font-size: var(--fs-sm);
    line-height: 1.8;
    color: var(--ink-2);
  }

  .bob-map-meta a { color: var(--ink); text-decoration-color: var(--line-2); }

  .bob-map-wrapper {
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surface-3);
  }

  .bob-map-wrapper iframe {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
  }

  /* --- Oddělení a lidé ------------------------------------------------------ */
  .bob-department + .bob-department { margin-top: var(--sp-12); }

  .bob-department__title { margin-bottom: var(--sp-6); font-size: var(--fs-h2); }

  .bob-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    height: 100%;
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: box-shadow var(--dur) var(--ease-out);
  }

  .bob-person:hover { box-shadow: var(--sh-md); }

  .bob-person__content { min-width: 0; }

  .bob-person__name {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 700;
    letter-spacing: var(--tracking-head);
    color: var(--ink);
  }

  .bob-person__role {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ink-3);
  }

  /* Dlouhý e-mail je jeden nezalomitelný řetězec — vedle portrétu na úzkém
     displeji přeteče z karty a posune celou stránku do strany. */
  .bob-person__contact {
    font-size: var(--fs-sm);
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .bob-person__contact a { color: var(--ink-2); text-decoration-color: var(--line-2); }
  .bob-person__contact a:hover { color: var(--ink); }

  /* Portrét si drží kruh i u fotek různých rozměrů */
  .bob-person__photo {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--surface-3);
  }

  .bob-person__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
}


/* =============================================================================
   FORMULÁŘE
   ========================================================================== */

@layer components {

  .bofb-form { display: flex; flex-direction: column; gap: var(--sp-5); }

  /* Dvousloupcové rozvržení od tabletu nahoru. Textová pole, přílohy
     a souhlas zabírají celou šířku — u nich je krátký sloupec na obtíž. */
  .bofb-form__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  @media (min-width: 640px) {
    .bofb-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-field--wide,
    .form-field--consent { grid-column: 1 / -1; }
  }

  .bofb-form__stav:empty { display: none; }

  .bofb-form__submit { align-self: flex-start; }

  @media (max-width: 639.98px) {
    .bofb-form__submit { align-self: stretch; width: 100%; }
  }

  /* --- Přílohy ------------------------------------------------------------ */
  .form-file {
    width: 100%;
    padding: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--ink-3);
    background: var(--surface-2);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-sm);
    cursor: pointer;
  }

  .form-file:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--sh-focus);
  }

  .form-file::file-selector-button {
    margin-right: var(--sp-3);
    padding: 0.5rem 1rem;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    cursor: pointer;
  }

  .form-file__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
  }

  .form-file__list:empty { display: none; }

  .form-file__item {
    padding: 0.25rem 0.625rem;
    font-size: var(--fs-2xs);
    color: var(--ink-2);
    background: var(--surface-3);
    border-radius: var(--r-pill);
  }

  /* --- Souhlas ------------------------------------------------------------ */
  .form-field--consent .form-check { align-items: start; }
  .form-field--consent .form-note { display: block; margin-top: var(--sp-1); }

  /* Odkaz na zásady zpracování: černý a polotučný, ne modrý.
     Při najetí sílí podtržení — tloušťka se mění bez přesazení textu,
     zatímco změna řezu písma by okolní text posunula. */
  .form-field--consent a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--dur-fast) var(--ease),
                text-decoration-thickness var(--dur-fast) var(--ease);
  }

  .form-field--consent a:hover,
  .form-field--consent a:focus-visible {
    color: var(--ink);
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
  }

  /* --- Hlášky -------------------------------------------------------------- */
  .form-error[hidden] { display: none; }

  .form-alert { margin: 0; }

  /* Formulář v modálním okně nemá mít vlastní vnější odsazení */
  .modal__dialog .bofb-form { margin: 0; }
}


/* =============================================================================
   STRÁNKA O NÁS — OCENĚNÍ, PBV CENTRUM, PARTNERSTVÍ
   Sekce, které existují jen tady, ale stavějí na stejných prvcích jako zbytek
   obsahových stránek (.bob-list, .bob-person, .bob-media).
   ========================================================================== */

@layer sections {

  .bob-awards,
  .bob-pbv,
  .bob-beach { padding-block: var(--section-y); }

  .bob-awards { background: var(--surface); }

  /* Nadpis i úvodní odstavec jdou přes celou šířku. V půlce stránky vypadaly
     proti sousední fotce jako poznámka pod čarou. */
  .bob-awards__head,
  .bob-pbv__head,
  .bob-beach__head { margin-bottom: var(--sp-10); }

  /* --- Ročník ocenění -------------------------------------------------------- */
  /* Text vlevo, fotky vpravo. Pořadí se u sudého ročníku prohazuje, aby dva
     bloky pod sebou nevytvořily jeden dlouhý sloupec obrázků. */
  .bob-award {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-10);
    align-items: start;
  }

  .bob-award + .bob-award {
    margin-top: var(--sp-16);
    padding-top: var(--sp-16);
    border-top: 1px solid var(--line);
  }

  /* Order sám nestačí — mřížka plní sloupce v pořadí zdroje, takže by se
     galerie přesunula do užšího sloupce. Proto se prohodí i šířky. */
  .bob-award--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

  .bob-award--reverse .bob-award__text    { order: 2; }
  .bob-award--reverse .bob-award__gallery { order: 1; }

  @media (max-width: 991.98px) {
    .bob-award,
    .bob-award--reverse { grid-template-columns: 1fr; gap: var(--sp-8); }

    /* Na úzkém displeji ať je text vždy první — prohození sloupců tam nedává
       smysl, obsah se stejně skládá pod sebe. */
    .bob-award--reverse .bob-award__text    { order: 0; }
    .bob-award--reverse .bob-award__gallery { order: 0; }
  }

  .bob-award__year {
    margin: 0 0 var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 750;
    line-height: 1;
    letter-spacing: var(--tracking-head);
    color: var(--ink-4);
  }

  .bob-award__title { margin: 0 0 var(--sp-4); font-size: var(--fs-h3); }

  .bob-award__lead {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--ink-3);
  }

  /* .bob-list se jinde přisazuje ke spodní hraně karty (margin-top: auto).
     Tady stojí v proudu textu, takže si odsazení určuje sám. */
  .bob-award__list,
  .bob-pbv__list {
    margin: var(--sp-6) 0 0;
    padding-top: var(--sp-6);
  }

  /* Odkaz na tiskovou zprávu: černý, polotučný, se šipkou jako pseudoprvkem —
     jen tak se dá při najetí posunout samostatně, bez posunu textu. */
  .bob-award__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-top: var(--sp-6);
    font-weight: 650;
    font-size: var(--fs-sm);
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    transition: text-decoration-color var(--dur-fast) var(--ease),
                text-decoration-thickness var(--dur-fast) var(--ease);
  }

  .bob-award__link:hover,
  .bob-award__link:focus-visible {
    color: var(--ink);
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
  }

  .bob-award__arrow { transition: transform var(--dur) var(--ease-out); }

  .bob-award__link:hover .bob-award__arrow,
  .bob-award__link:focus-visible .bob-award__arrow { transform: translateX(5px); }

  /* --- Fotky z vyhlášení ----------------------------------------------------- */
  /* Vícesloupcová sazba, ne mřížka: fotky z vyhlášení jsou na šířku i na výšku
     a v mřížce s pevným poměrem stran by se stojícím lidem uřízla hlava.
     Takhle si každá fotka nese svůj rozměr a sloupce se doplní bez děr. */
  .bob-award__gallery {
    columns: 2;
    column-gap: var(--sp-4);
  }

  @media (max-width: 575.98px) {
    .bob-award__gallery { columns: 1; }
  }

  .bob-award__figure {
    margin: 0 0 var(--sp-4);
    overflow: hidden;
    background: var(--surface-3);
    border-radius: var(--r-lg);
    break-inside: avoid;
  }

  .bob-award__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .bob-award__figure:hover .bob-award__img { transform: scale(1.03); }

  /* --- PBV centrum ----------------------------------------------------------- */
  .bob-pbv__eyebrow {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-2xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-4);
  }

  .bob-pbv__layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--sp-10);
    align-items: start;
  }

  .bob-pbv__media {
    margin: 0;
    overflow: hidden;
    background: var(--surface-3);
    border-radius: var(--r-lg);
  }

  .bob-pbv__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .bob-pbv__list { margin-top: 0; padding-top: 0; border-top: 0; }

  .bob-pbv__person { margin-top: var(--sp-8); }

  /* --- Sportovní partnerství -------------------------------------------------- */
  /* Odsazení od odstavce nad seznamem je záměrně velké: klubové dlaždice jsou
     samostatný blok, ne pokračování textu. */
  .bob-club-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-10);
  }

  .bob-club {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    color: var(--ink-2);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
  }

  /* Při najetí černá, ne modrá — u loga partnera by odkazová modř rušila. */
  .bob-club:hover,
  .bob-club:focus-visible {
    color: var(--ink);
    border-color: var(--line-2);
    box-shadow: var(--sh-md);
  }

  .bob-club__logo {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
  }

  /* Loga klubů mají různý poměr stran — contain je nechá celá, ořez by
     ukrojil znak i letopočet. Rozměry drží obrázek sám (ne max-*), jinak si
     vysoké logo vytlačí větší výšku, než má rámeček. */
  .bob-club__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .bob-club__body { min-width: 0; }

  /* Název klubu se musí vejít na jeden řádek i ve dvousloupcovém rozvržení
     vedle loga a šipky — proto menší řez než u ostatních karet. */
  .bob-club__name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: var(--tracking-head);
    color: var(--ink);
    white-space: nowrap;
  }

  .bob-club__role {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-3);
  }

  .bob-club__arrow {
    flex-shrink: 0;
    margin-left: auto;
    font-weight: 650;
    color: currentColor;
    transition: transform var(--dur) var(--ease-out);
  }

  .bob-club:hover .bob-club__arrow,
  .bob-club:focus-visible .bob-club__arrow { transform: translateX(5px); }

  /* --- Partnerské golfové hřiště ----------------------------------------------- */
  /* Golf není sponzoring jako u klubů, ale výhoda pro zákazníky skupiny —
     proto vlastní karta a ne další řádek v seznamu partnerů, kde by se
     ztratila mezi kluby a nadacemi. */
  .bob-golf { padding-block: var(--section-y); }

  .bob-golf__card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-5) var(--sp-8);
    padding: var(--sp-8);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
  }

  .bob-golf__logo {
    flex-shrink: 0;
    width: 150px;
  }

  .bob-golf__logo img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* min-width: 0 — bez něj se text nezalomí a roztlačí kartu přes šířku
     kontejneru. Základ 22rem drží logo a text vedle sebe jen tam, kde na to
     je místo; jinak se karta zalomí pod sebe sama. */
  .bob-golf__body {
    flex: 1 1 22rem;
    min-width: 0;
  }

  .bob-golf__eyebrow {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-4);
  }

  .bob-golf__title {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 750;
    letter-spacing: var(--tracking-head);
    color: var(--ink);
  }

  .bob-golf__text {
    margin: 0;
    max-width: 46ch;
    color: var(--ink-2);
  }

  /* Odkazy vedle sebe; `bob-award__link` si nese vlastní horní mezeru,
     tady ji přebíjí mezera mřížky, ať tři odkazy pod sebou nenarostou. */
  .bob-golf__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
    margin-top: var(--sp-5);
  }

  .bob-golf__links .bob-award__link { margin-top: 0; }

  /* --- Ostrava Beach Pro ------------------------------------------------------ */
  .bob-beach { background: var(--surface); }

  .bob-beach__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--sp-4);
  }

  .bob-beach__figure {
    margin: 0;
    overflow: hidden;
    background: var(--surface-3);
    border-radius: var(--r-lg);
  }

  .bob-beach__img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .bob-beach__figure:hover .bob-beach__img { transform: scale(1.03); }

  .bob-beach__link { margin-top: var(--sp-8); }
}


/* =============================================================================
   ROZCESTNÍK SKUPINY (kořen webu)
   Stránka, která nic neprodává — jen rozhoduje, kam návštěvník půjde dál.
   ========================================================================== */

@layer sections {

  .bob-landing { padding-block: var(--sp-16) var(--sp-12); }

  /* V hlavičce zůstává jen logo — claim „Společně lepší cestou" je jeho
     součástí, takže nadpis pod ním jen opakoval totéž. */
  .bob-landing__head {
    margin: 0 auto var(--sp-12);
    text-align: center;
  }

  .bob-landing__logo {
    margin: 0;
    line-height: 0;
  }

  .bob-landing__logo img {
    display: inline-block;
    width: min(100%, 34rem);
    height: auto;
  }

  /* Čtyři vysoké úzké sloupce vedle sebe. Po najetí se ten pod kurzorem
     roztáhne na svou plnou velikost, ostatní ustoupí — efekt převzatý
     z původního rozcestníku. Dlaždice nenesou žádný text, logo značky je
     vypálené přímo ve fotce.

     Výška je pevná (660 px), takže roztažená dlaždice potřebuje ke zobrazení
     celé fotky asi 642 px — podklady mají poměr 962×989. Při čtyřech
     dlaždicích a mezerách tomu odpovídá flex-grow 3.6. */
  .bob-landing__grid {
    --vyska-dlazdice: min(74vh, 660px);

    display: flex;
    gap: var(--sp-4);
    height: var(--vyska-dlazdice);
  }

  .bob-tile {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--inverse);
    /* Roztažení je velký pohyb celé řady, takže potřebuje víc času než běžné
       přechody — a křivku, která zrychluje i zpomaluje. S pouhým „ease-out"
       vyrážel start trhaně. */
    transition: flex-grow 0.75s cubic-bezier(0.65, 0, 0.35, 1),
                filter 0.75s cubic-bezier(0.65, 0, 0.35, 1);
  }

  @media (min-width: 992px) and (hover: hover) {
    /* Nezvýrazněné dlaždice jdou mírně do pozadí. Původní web je ztmavoval
       na 40 %, což bylo tolik, že fotka zmizela — 72 % stačí. */
    .bob-landing__grid:hover .bob-tile { filter: brightness(0.72); }

    .bob-tile:hover {
      flex-grow: 3.6;
      filter: brightness(1);
    }
  }

  .bob-tile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Podklad pod tlačítkem. Přechod zdola, ne plochý závoj přes celou fotku —
     zvýrazněná dlaždice má být ta nejsvětlejší, ne nejtmavší. */
  .bob-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(11, 12, 14, 0.62) 0%,
                rgba(11, 12, 14, 0) 48%);
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out);
  }

  .bob-tile:hover::after,
  .bob-tile:focus-visible::after { opacity: 1; }

  /* Tlačítko sedí dole na střed — na desktopu i na mobilu. Liší se jen to,
     kdy je vidět: na desktopu po najetí, na dotyku pořád. */
  .bob-tile__cta {
    position: absolute;
    left: 50%;
    /* Ne úplně u spodní hrany — dlaždice je vysoká přes 600 px a tlačítko
       nalepené dolů působilo odseknutě. Na mobilu je karta nízká, tam se
       odsazení zmenšuje (viz níže). */
    bottom: var(--sp-10);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--sp-6);
    font-size: var(--fs-sm);
    font-weight: 650;
    white-space: nowrap;
    color: var(--ink);
    background: #fff;
    border-radius: var(--r-pill);
    transform: translate(-50%, 8px);
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }

  .bob-tile:hover .bob-tile__cta,
  .bob-tile:focus-visible .bob-tile__cta {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  /* --- Rozcestník na užších displejích ------------------------------------
     Roztahování nedává smysl tam, kde se nenajíždí myší. Dlaždice jdou pod
     sebe v celém poměru stran podkladu a tlačítko je vidět pořád — dole na
     střed, ať nezakrývá logo v horní části fotky.                          */
  @media (max-width: 991.98px), (hover: none) {
    .bob-landing__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      height: auto;
    }

    .bob-tile { flex: none; }

    .bob-tile__img { aspect-ratio: 962 / 989; height: auto; }

    .bob-tile::after { opacity: 1; }

    .bob-tile__cta {
      bottom: var(--sp-5);
      transform: translate(-50%, 0);
      opacity: 1;
    }
  }

  @media (max-width: 575.98px) {
    .bob-landing__grid { grid-template-columns: 1fr; }
  }

  /* --- Pruh se značkami ------------------------------------------------------ */
  .bob-brandbar { padding-block: var(--sp-12); }

  /* Stejně široké sloupce bez ohledu na počet log — na rozcestníku jich je pět,
     na úvodní stránce autosalonu čtyři. */
  .bob-brandbar__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: center;
    justify-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bob-brandbar__list > li { width: 100%; }

  /* Loga se sázejí na ŠÍŘKU sloupce, ne na výšku. Všechna mají plátno
     361×128, ale kresba v něm zabírá jen část — při sazbě podle výšky proto
     vycházela nesmyslně drobná. */
  .bob-brandbar__link {
    display: block;
    width: 80%;
    margin-inline: auto;
  }

  .bob-brandbar__img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
  }

  .bob-brandbar__link:hover .bob-brandbar__img,
  .bob-brandbar__link:focus-visible .bob-brandbar__img {
    filter: grayscale(0);
    opacity: 1;
  }

  /* Pod tabletem po dvou na řádek — pět sloupců vedle sebe by z log udělalo
     nečitelné proužky. */
  @media (max-width: 767.98px) {
    .bob-brandbar__list {
      grid-auto-flow: row;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-6);
    }

    /* Na rozcestníku je log pět — ve dvou sloupcích by páté zůstalo samo na
       třetím řádku. Jaguar má vlastní dlaždici i odkaz v patičce, takže se
       o něj nikdo nepřipraví. */
    .bob-brandbar__item--jen-desktop { display: none; }
  }

  /* Na dotykových zařízeních se nenajíždí myší — loga ať jsou rovnou barevná */
  @media (hover: none) {
    .bob-brandbar__img { filter: grayscale(0); opacity: 1; }
  }
}


/* =============================================================================
   STRÁNKA O NÁS — MILNÍKY, SV CENTRUM, HODNOTY, AMBASADOŘI
   ========================================================================== */

@layer sections {

  .bob-timeline,
  .bob-sv,
  .bob-values,
  .bob-about-ambassadors { padding-block: var(--section-y); }

  .bob-sv     { background: var(--surface); }
  .bob-values { background: var(--inverse); color: #fff; }

  /* --- Milníky ---------------------------------------------------------------- */
  /* Vodorovná osa: letopočet, pod ním popis. Spojnice je pseudoprvek na položce,
     ne samostatný element — u posledního milníku se prostě nevykreslí. */
  .bob-timeline__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: milnik;
  }

  .bob-timeline__item {
    position: relative;
    padding-top: var(--sp-8);
    border-top: 2px solid var(--line-2);
  }

  .bob-timeline__item::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: var(--r-pill);
  }

  .bob-timeline__year {
    display: block;
    margin-bottom: var(--sp-3);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 750;
    line-height: 1;
    letter-spacing: var(--tracking-head);
    color: var(--accent);
  }

  .bob-timeline__title { margin: 0 0 var(--sp-3); font-size: var(--fs-h4); }

  .bob-timeline__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-3);
  }

  /* --- SV centrum -------------------------------------------------------------- */
  .bob-sv__head { margin-bottom: var(--sp-10); }

  .bob-sv__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-10);
    align-items: start;
  }

  @media (max-width: 991.98px) {
    .bob-sv__layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  }

  /* První fotka přes celou šířku sloupce, zbylé dvě vedle sebe pod ní */
  .bob-sv__media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  .bob-sv__figure {
    margin: 0;
    overflow: hidden;
    background: var(--surface-3);
    border-radius: var(--r-lg);
  }

  .bob-sv__figure:first-child { grid-column: 1 / -1; }

  .bob-sv__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .bob-sv__figure:first-child .bob-sv__img { aspect-ratio: 16 / 10; }

  .bob-sv__figure:hover .bob-sv__img { transform: scale(1.03); }

  .bob-sv__text .bob-feature-grid { margin-top: var(--sp-8); }

  /* Karty předností stojí na bílém podkladu sekce — potřebují odlišit */
  .bob-sv .bob-feature { background: var(--canvas); }

  /* --- Vize, mise, odpovědnost -------------------------------------------------- */
  .bob-values__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--sp-8);
  }

  .bob-value {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-8);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-lg);
  }

  .bob-value__badge {
    margin: 0;
    font-size: var(--fs-2xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.55);
  }

  .bob-value__claim {
    margin: 0;
    font-size: var(--fs-h4);
    color: #fff;
  }

  .bob-value__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.78);
  }

  /* --- Ambasadoři ---------------------------------------------------------------- */
  .bob-ambassadors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--sp-6);
  }

  .bob-ambassador {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }

  .bob-ambassador__photo {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    overflow: hidden;
    background: var(--surface-3);
    border-radius: var(--r-pill);
  }

  .bob-ambassador__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  /* Zástupný monogram, dokud nejsou k dispozici portréty */
  .bob-ambassador__initials {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 750;
    letter-spacing: var(--tracking-head);
    color: var(--ink-4);
  }


  .bob-ambassador__name a { color: var(--ink); text-decoration-color: var(--line-2); }
  .bob-ambassador__name a:hover,
  .bob-ambassador__name a:focus-visible { color: var(--ink); text-decoration-color: currentColor; }

  /* Jméno a funkce k sobě patří, ale ne natolik, aby se dotýkaly — záporný
     horní okraj je tlačil pod dotisk písmen a funkce v tom zanikala. */
  .bob-ambassador__name { margin-bottom: var(--sp-2); }

  .bob-ambassador__role {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--ink-4);
  }

  .bob-ambassador__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-3);
  }
}


/* =============================================================================
   PŘEPISY STYLŮ PLUGINŮ — ZÁMĚRNĚ MIMO @layer
   =============================================================================

   Tohle je jediné místo v celém designovém systému, které stojí mimo vrstvy,
   a má to konkrétní důvod: nevrstvené CSS vždy přebije vrstvené, bez ohledu
   na specificitu. FacetWP si své styly vkládá do stránky nevrstvené (mimo jiné
   počet sloupců mřížky do třídy s náhodným jménem), takže bychom se k němu
   zevnitř vrstev nedostali jinak než přes !important.

   Cokoliv jiného patří do vrstev výše.
   ========================================================================== */

/* --- Mřížka výsledků ------------------------------------------------------
   Počet sloupců řídíme odsud, ne nastavením ve FacetWP. Díky tomu se rozvržení
   nemění podle administrace a je responzivní i tam, kde FacetWP nabízí jen
   pevné číslo.                                                              */
/* `.bob-article__content` je v seznamu proto, že výpis vozů se vkládá i do
   článků s akcemi. Bez něj tam mřížka nevznikne, karty spadnou na vlastní
   rozvržení FacetWP a nemají ani stejnou výšku. */
body .bob-results .facetwp-template .fwpl-layout,
body .bob-home-cars .facetwp-template .fwpl-layout,
body .bob-article__content .facetwp-template .fwpl-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 576px) {
  body .bob-results .facetwp-template .fwpl-layout,
  body .bob-home-cars .facetwp-template .fwpl-layout { grid-template-columns: repeat(2, 1fr); }
}

/* V článku je sloupec textu užší než výpis, takže dvě karty vedle sebe dávají
   smysl až od většího displeje — do té doby by se štítky lámaly. */
@media (min-width: 768px) {
  body .bob-article__content .facetwp-template .fwpl-layout { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  /* Homepage má 6 vozů — tři sloupce, dva řádky */
  body .bob-home-cars .facetwp-template .fwpl-layout { grid-template-columns: repeat(3, 1fr); }
}

/* Výpis skladových vozů zůstává na dvou sloupcích — vedle filtrace je karta
   ve třech sloupcích příliš úzká na to, aby se štítky vešly na jeden řádek. */

/* --- Řazení ---------------------------------------------------------------
   FacetWP vykreslí prostý <select> bez vlastní třídy, proto se cílí přes typ
   facetu.                                                                   */
.facetwp-type-sort select,
.facetwp-per-page-select,
.facetwp-sort-select {
  appearance: none;
  padding: 0.625rem 2.5rem 0.625rem 1rem;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E") no-repeat right 1rem center / 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.facetwp-type-sort select:focus-visible,
.facetwp-per-page-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--sh-focus);
}

/* --- Načíst další ---------------------------------------------------------
   Stránkování je nastavené jako tlačítko „Zobrazit další vozy", ne jako čísla
   stránek.                                                                  */
.facetwp-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-inline: auto;
  padding: 0.875rem 2rem;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.facetwp-load-more:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.facetwp-facet-pager_ { display: flex; justify-content: center; }

/* --- Posuvníky rozsahu (noUiSlider) --------------------------------------- */
.facetwp-slider.noUi-target {
  height: 4px;
  margin: var(--sp-4) 0.5rem var(--sp-2);
  background: var(--surface-3);
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: none;
}

.facetwp-slider .noUi-connect { background: var(--ink); }

/* Selektor je schválně o třídu konkrétnější než `.facetwp-slider .noUi-handle`:
   noUiSlider si sám nastavuje `.noUi-horizontal .noUi-handle { top: -4px }`
   a při shodné specificitě vyhrával, takže kolečka seděla nad linkou.
   Dráha je vysoká 4 px, kolečko 20 px → střed je na -8 px. */
.facetwp-slider.noUi-target .noUi-handle {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  top: -8px;
  transform: none;
  right: -10px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  cursor: grab;
}

.facetwp-slider.noUi-target .noUi-handle::before,
.facetwp-slider.noUi-target .noUi-handle::after { display: none; }

.facetwp-slider.noUi-target .noUi-handle:active { cursor: grabbing; }

.facetwp-slider-label,
.facetwp-slider-reset {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* --- Počty výsledků -------------------------------------------------------- */
.facetwp-facet-pager_counts,
.facetwp-counts {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* FacetWP dává facetům spodní marži; rozestupy řídí panel filtrace */
.bob-filter .facetwp-facet { margin-bottom: 0; }

/* --- Zaškrtávátka ---------------------------------------------------------
   FacetWP kreslí zaškrtávátko jako obrázek na pozadí položky (checkbox.png).
   Vlastní vykreslujeme pseudoprvkem, takže to původní musí pryč — a protože
   jeho pravidlo je nevrstvené, musí být i tenhle přepis tady dole.         */
.facetwp-facet .facetwp-checkbox,
.facetwp-facet .facetwp-checkbox.checked {
  background-image: none;
  padding-left: var(--sp-2);
}


/* --- Odsazení kvůli lepivé liště akcí -------------------------------------
   WordPress vkládá do stránky nevrstvený předpis body { padding: 0 } (globální
   styly). Kdyby tohle pravidlo zůstalo ve vrstvě, prohrálo by s ním a lišta by
   překrývala konec stránky — typicky patičku.                              */
@media (max-width: 991.98px) {
  body:has(.bob-actionbar) { padding-bottom: 76px; }
}


/* --- Číslované stránkování -------------------------------------------------
   FacetWP vykresluje <a class="facetwp-page"> s modifikátory active / dots /
   next / prev. Jeho vlastní styly jsou nevrstvené, proto i tento blok.     */
.facetwp-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.facetwp-pager .facetwp-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.facetwp-pager .facetwp-page:hover {
  background: var(--surface-3);
  color: var(--ink);
  border-color: var(--line-2);
}

.facetwp-pager .facetwp-page.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  cursor: default;
}

/* Výpustka není odkaz — nemá se tvářit jako klikatelná */
.facetwp-pager .facetwp-page.dots {
  min-width: auto;
  padding-inline: var(--sp-1);
  background: none;
  border-color: transparent;
  color: var(--ink-4);
  cursor: default;
  pointer-events: none;
}

.facetwp-pager .facetwp-page.prev,
.facetwp-pager .facetwp-page.next { font-weight: 550; }


/* --- Stránkování na mobilu ------------------------------------------------
   Na úzkém displeji se řada čísel láme do několika řádků a špatně se trefuje.
   Zůstávají proto jen „Předchozí" a „Další"; číslo cílové stránky se bere
   z atributu data-page, který FacetWP na odkazy dává, takže na to není
   potřeba žádný skript.                                                    */
@media (max-width: 767.98px) {
  .facetwp-pager { justify-content: space-between; }

  .facetwp-pager .facetwp-page:not(.prev):not(.next) { display: none; }

  /* Popisek „Další (2) ›" se v pilulce omezené na 48 % lámal na dva řádky.
     Tlačítka se proto přizpůsobí obsahu a text se nezalamuje. */
  .facetwp-pager .facetwp-page.prev,
  .facetwp-pager .facetwp-page.next {
    flex: 0 1 auto;
    max-width: none;
    white-space: nowrap;
    padding-inline: var(--sp-4);
  }

  .facetwp-pager .facetwp-page.prev::after,
  .facetwp-pager .facetwp-page.next::after {
    content: " (" attr(data-page) ")";
    margin-left: 0.3em;
    color: var(--ink-4);
    font-weight: 550;
  }

  /* Když existuje jen jeden směr, ať nezabírá celou šířku */
  .facetwp-pager .facetwp-page.next:only-child { flex: 0 1 auto; margin-inline: auto; }
}


/* =============================================================================
   PŘEHLEDY ČLÁNKŮ A DETAIL
   ========================================================================== */

@layer components {

  /* Společná mřížka pro akce i novinky — na homepage i v přehledu */
  .bob-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: var(--sp-6);
  }

  /* Náhrada chybějícího náhledu, ať karta nezůstane bez obrázku rozbitá */
  .offer-card__noimg,
  .news-card__noimg {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--surface-3);
  }

  .offer-content__link {
    font-weight: 600;
    color: #fff;
    text-decoration: none;
  }

  /* --- Stránkování přehledů ------------------------------------------------ */
  .bob-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-12);
  }

  .bob-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding-inline: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }

  .bob-pagination .page-numbers:hover { background: var(--surface-3); color: var(--ink); }

  .bob-pagination .page-numbers.current {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
  }

  .bob-pagination .page-numbers.dots {
    min-width: auto;
    padding-inline: var(--sp-1);
    background: none;
    border-color: transparent;
    color: var(--ink-4);
  }

  @media (max-width: 767.98px) {
    /* Na mobilu jen předchozí a další — čísla se lámou a špatně se trefují */
    .bob-pagination { justify-content: space-between; }
    .bob-pagination .page-numbers:not(.prev):not(.next) { display: none; }
    .bob-pagination .prev,
    .bob-pagination .next { white-space: nowrap; padding-inline: var(--sp-4); }
  }

  /* --- Detail článku -------------------------------------------------------- */
  .bob-article__media {
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--surface-3);
  }

  .bob-article__media img {
    width: 100%;
    height: auto;
    max-height: 32rem;
    object-fit: cover;
  }

  .bob-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .bob-article__back { margin-top: var(--sp-12); }

  /* Šířka a vystředění článku jsou mezi přepisy na konci souboru — WordPress
     vkládá nevrstvené :where(figure) { margin: 0 0 1em }, které by úvodnímu
     obrázku sebralo vystředění. */
}


/* =============================================================================
   HUTNĚJŠÍ OBSAHOVÉ STRÁNKY
   Sekce po sobě mají vlastní odsazení nahoře i dole, takže mezi nimi vznikaly
   dvojité mezery a stránka působila prázdně. Sousedící sekce se proto stahují
   k sobě a rytmus drží jen jedno odsazení.
   ========================================================================== */

@layer sections {

  .bob-page-intro,
  .bob-fin-intro,
  .bob-buyback-intro,
  .bob-about-intro { padding-block: var(--sp-12) var(--sp-10); }

  .bob-fin-benefits,
  .bob-fin-options,
  .bob-fin-steps,
  .bob-fin-docs,
  .bob-buyback-benefits,
  .bob-buyback-steps,
  .bob-buyback-docs,
  .bob-about-why,
  .bob-about-csr,
  .bob-service-grid { padding-block: var(--sp-12); }

  /* Sekce na barevném podkladu potřebuje víc vzduchu, aby pruh nebyl tenký */
  .bob-fin-options,
  .bob-buyback-steps,
  .bob-about-why { padding-block: var(--sp-16); }

  .bob-service-grid__middle,
  .bob-service-grid__bottom { margin-top: var(--sp-12); }
}


/* --- Sloupec článku ---------------------------------------------------------
   Úzký vystředěný sloupec. Musí být mimo vrstvy: WordPress přidává do stránky
   nevrstvené pravidlo :where(figure) { margin: 0 0 1em }, a nevrstvené CSS
   přebíjí vrstvené bez ohledu na specificitu — úvodní obrázek by pak zůstal
   přilepený vlevo, zatímco text by byl vystředěný.                           */
.bob-article__header,
.bob-article__media,
.bob-article__content,
.bob-article__back {
  max-width: 46rem;
  margin-inline: auto;
}

.bob-article__media { margin-bottom: var(--sp-10); }

/* Akce dostanou širší sloupec — viz `body_class` ve functions.php. Vlastní HTML
   kampaně je psané na 900 px, takže ho tahle šířka konečně nechá dýchat, a výpis
   vozů pod ním dostane karty velké jako ve skladu.
   Také mimo vrstvy: pravidlo výš, které přebíjí, je nevrstvené.               */
.bob-clanek--akce .bob-article__header,
.bob-clanek--akce .bob-article__media,
.bob-clanek--akce .bob-article__content,
.bob-clanek--akce .bob-article__back {
  max-width: 64rem;
}