/* ══════════════════════════════
   Cases Slider Component
   Prefix: cs- (Cases Slider)
   Desktop: image left, text right
   Mobile: stacked
   ══════════════════════════════ */

/* ── Block heading ── */
.cs-heading {
  font-size: 24px;
  color: #1a1a1a;
  line-height: 1.3;
  margin: 0 0 8px;
}

.cs-subheading {
  font-size: 18px;
  font-weight: 400 !important;
  color: #000;
  line-height: 1.3;
  margin: 0 0 20px;
}

.cs-wrapper {
  width: 100%;
  margin: 20px 0;
}

/* ── Case heading ── */
.cs-case-heading {
  font-size: 28px !important;
  font-weight: 400 !important;
  color: #000;
  margin: 0 0 10px;
  line-height: 1.3 !important;
}

/* First case heading: top gap matches the gap under the block heading
   (subheading bottom-margin is overridden small by theme → first case was glued). */
.cs-subheading + .cs-case-heading,
.cs-heading + .cs-case-heading,
.cs-subheading + .cs-item > .cs-case-heading,
.cs-heading + .cs-item > .cs-case-heading {
  margin-top: 20px !important;
}

/* Price line under the case heading — brand display font + site accent blue,
   so it reads as part of the title block (not a bolted-on blue label). */
.cs-case-price {
  font-family: 'Hyundai', Inter, Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #103a71 !important;
  margin: -8px 0 6px !important;
  line-height: 1.1 !important;
}

/* ── Card ── */
.cs-card {
  background: #fff;
  border-radius: 4px;
  width: 100%;
}

/* ── Media column (image + thumbnails) ── */
.cs-media {
  width: 100%;
}

/* ── Main image area ── */
.cs-main {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #e8e8e8;
  border-radius: 4px;
}

.cs-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s ease;
  will-change: transform;
}

.cs-slide {
  min-width: 100%;
  height: 100%;
}

.cs-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.cs-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* ── Arrows ── */
.cs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s;
  z-index: 2;
}

.cs-arrow:hover {
  background: rgba(0, 0, 0, 0.6);
}

.cs-arrow--left {
  left: 12px;
}

.cs-arrow--right {
  right: 12px;
}

/* ── Counter ── */
.cs-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 2;
  user-select: none;
}

/* ── Content ── */
.cs-content {
  min-height: auto;
}

.cs-title {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #999 !important;
  margin: 8px 0 0 !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

.cs-description {
  overflow: hidden;
}

.cs-description h3 {
  font-size: inherit !important;
  font-weight: 600 !important;
  margin: 12px 0 4px !important;
  line-height: 1.3;
}

.cs-text {
  line-height: 1.5;
  margin-top: 6px;
}

/* ── Long text expand/collapse ── */
.cs-long-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s ease, opacity 0.3s ease;
}

.cs-long-wrap.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.cs-long-wrap > .cs-long-text {
  overflow: hidden;
  margin-top: 0;
}

.cs-long-wrap.open > .cs-long-text {
  margin-top: 4px;
}

/* ── Hidden tail (reset .service-block p span {font-size:120%}) ── */
.cs-tail-hidden {
  font-size: inherit !important;
}

/* ── Show more / Hide buttons ── */
.cs-more {
  display: inline;
  font-size: inherit;
  font-weight: 400;
  color: var(--main-color);
  text-decoration: none !important;
  text-underline-offset: 4px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 1px dashed var(--main-color);
  transition: color 0.2s;
}

.cs-more:hover {
  color: var(--main-color-darken);
}

/* 25.06.2026 v32 — toggle triangle («Открыть кейс»/«Подробнее»/«Скрыть») sized to
   match the .csl interlink summary marker (13px). Both glyphs are from the Unicode
   small-triangle set (U+25BE ▾ / U+25B8 ▸), same metrics, so at 13px the sizes are
   equal (orientation differs by design). .up = «Скрыть» (rotated 180). */
.cs-tri {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  vertical-align: baseline;
}
.cs-tri.up { transform: rotate(180deg); }

/* ── Bottom row (thumbnails + arrows) ── */
.cs-bottom-row {
  margin-top: 10px;
  position: relative;
  width: 100%;
}

/* ── Thumbnail arrows (overlay on edge thumbs) ── */
.cs-thumb-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: background 0.2s;
  z-index: 2;
}

.cs-thumb-arrow:hover {
  background: rgba(255, 255, 255, 0.95);
}

.cs-thumb-arrow--left {
  left: 6px;
}

.cs-thumb-arrow--right {
  right: 6px;
}

/* ── Thumbnails (single row, no wrap) ── */
.cs-thumbnails {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
  width: 100%;
}

.cs-thumb {
  position: relative;
  flex-shrink: 0;
  width: 130px;
  height: 73px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s;
  background: #1a1a1a;
}

/* Play-иконка на миниатюре видео */
.cs-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  pointer-events: none;
  display: block;
}

.cs-thumb-play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 9px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.cs-thumb.active {
  border-color: var(--main-color);
  opacity: 1;
}

.cs-thumb:hover {
  opacity: 1;
}

.cs-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ═══════════════════════════
   Set-level «Показать ещё кейсы» (accordion tail)
   ═══════════════════════════ */
.cs-tail[hidden] {
  display: none !important;
}

.cs-show-more-wrap {
  display: flex;
  justify-content: center;
  margin: 26px 0 34px;
}

/* Accent CTA (owner 25.06.2026): solid brand-blue fill, white text, XL size,
   prominent shadow — the user must not miss it. Full-width on mobile. */
.cs-show-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 36px;
  background: var(--main-color);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(16, 58, 113, 0.35);
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
  -webkit-appearance: none;
}

.cs-show-more:hover {
  background: #2a55ad;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16, 58, 113, 0.45);
}

.cs-show-more:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(16, 58, 113, 0.35);
}

.cs-show-more:focus-visible {
  outline: 3px solid rgba(16, 58, 113, 0.4);
  outline-offset: 3px;
}

.cs-show-more svg {
  flex-shrink: 0;
  transition: transform .25s ease;
}

.cs-show-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ═══════════════════════════
   DESKTOP (>600px) — two columns
   ═══════════════════════════ */
@media (min-width: 601px) {
  .cs-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }

  .cs-media {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .cs-main {
    aspect-ratio: 16/9;
  }

  /* Выровнять верх описания с верхом фото — жёстко обнуляем margin/padding сверху */
  .cs-content > .cs-description,
  .cs-content > .cs-description > *:first-child,
  .cs-content > .cs-description > *:first-child > *:first-child,
  .cs-content > .cs-description > *:first-child > *:first-child > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .cs-content {
    flex: 1;
    min-width: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }

  .cs-description {
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  .cs-description::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
  }

  .cs-content > .cs-more {
    flex-shrink: 0;
    margin-top: 6px;
    align-self: flex-start;
  }

  /* Desktop: show long text by default, let overflow clip it */
  .cs-long-wrap {
    display: block;
    opacity: 1;
    grid-template-rows: unset;
    transition: none;
  }

  .cs-long-wrap > .cs-long-text {
    overflow: visible;
    margin-top: 4px;
  }

  /* Expanded state */
  .cs-card.cs-expanded {
    align-items: flex-start;
  }

  .cs-card.cs-expanded .cs-description {
    overflow: visible;
  }

  .cs-card.cs-expanded .cs-description::after {
    display: none;
  }
}

/* ═══════════════════════════
   MOBILE (<= 600px)
   ═══════════════════════════ */
@media (max-width: 600px) {
  .cs-heading {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .cs-wrapper {
    margin: 10px 0;
  }

  .cs-card {
    border-radius: 0;
    box-shadow: none;
  }

  .cs-main {
    height: auto;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: 0;
  }

  .cs-track {
    height: auto;
  }

  .cs-slide {
    height: auto;
  }

  .cs-slide img {
    height: auto;
    object-fit: contain;
  }

  .cs-arrow {
    width: 36px;
    height: 36px;
  }

  .cs-arrow--left {
    left: 2px;
  }

  .cs-arrow--right {
    right: 2px;
  }

  .cs-content {
    min-height: auto;
    /* v37 (29.06.2026): more breathing room between the photo caption (.cs-title)
       and the «Открыть кейс ▾» toggle (.cs-more) on phones — owner request. */
    margin-top: 14px;
  }

  .cs-title {
    font-size: 16px;
  }

  .cs-case-heading {
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
  }

  .cs-case-price {
    font-size: 19px !important;
    margin: -11px 0 9px !important;
    line-height: 1.1 !important;
  }

  /* Mobile: first case gap = gap under heading (18px) */
  .cs-subheading + .cs-case-heading,
  .cs-heading + .cs-case-heading,
  .cs-subheading + .cs-item > .cs-case-heading,
  .cs-heading + .cs-item > .cs-case-heading {
    margin-top: 18px !important;
  }

  .cs-bottom-row {
    display: none;
  }

  /* Set-level «Показать ещё» — mobile sizing (full-width accent CTA) */
  .cs-show-more {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 16px;
  }

  /* Mobile case toggle "Открыть кейс ▾" — neutral dark text, no underline (per request) */
  .cs-more {
    color: #222;
    border-bottom: none;
  }
  .cs-more:hover {
    color: #000;
  }
}


/* ── Collapsed case accordion (ported from test2, 18.06.2026) ── */
.cs-acc {
  margin: 20px 0;            /* same vertical rhythm as open .cs-wrapper, so collapsed cases don't touch */
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.cs-acc-head {
  display: flex; align-items: flex-start; gap: 16px; width: 100%;
  text-align: left; background: none; border: 0; cursor: pointer;
  padding: 18px 20px; font: inherit;
}
.cs-acc-head:hover { background: #f7f8fa; }
.cs-acc-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-acc-heading { font-size: 20px; font-weight: 400; color: #000; line-height: 1.3; }
.cs-acc-price { margin: 4px 0 0 !important; }
.cs-acc-chevron {
  flex: 0 0 auto; width: 12px; height: 12px; margin-top: 6px;
  border-right: 2px solid #103a71; border-bottom: 2px solid #103a71;
  transform: rotate(45deg); transition: transform .2s ease;
}
.cs-acc.open .cs-acc-chevron { transform: rotate(-135deg); }
.cs-acc-body { padding: 0 20px 4px; }
.cs-acc-body[hidden] { display: none; }
.cs-acc-body .cs-wrapper { margin-top: 8px; }
@media (max-width: 600px) {
  .cs-acc { margin: 10px 0; }
  .cs-acc-head { padding: 14px; gap: 12px; }
  .cs-acc-heading { font-size: 17px; }
  .cs-acc-price { font-size: 19px !important; }
  .cs-acc-body { padding: 0 14px 4px; }
  .cs-acc-body .cs-main { width: 100%; margin-left: 0; border-radius: 4px; }
}

/* ── Запчасти и расходные материалы (case-parts-card) — единый блок, 18.06.2026 ──
   Один CSS + один PHP-шаблон (cl_parts_card_html). Авто-вставка после «Что сделали».
   Имена классов из ТЗ. Текстовые правила — ДВОЙНОЙ класс (0,2,0), чтобы перебить
   тему `.editor p {font-size:16px}` (0,1,1) и её p-отступы (см. why-choose.md). */
.case-parts-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 16px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.case-parts-card__body { flex: 1 1 auto; min-width: 0; }
.case-parts-card .case-parts-card__title {
  font-family: 'Hyundai', Inter, Arial, sans-serif;
  font-size: 21px;
  font-weight: 400;
  color: #000;
  line-height: 1.25;
  margin: 0 0 12px;
  padding: 0;
}
.case-parts-card__list { display: flex; flex-direction: column; gap: 9px; }
.case-parts-card .case-parts-card__item {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #333;
}
.case-parts-card .case-parts-card__item strong { font-weight: 600; color: #111; }
.case-parts-card .case-parts-card__meta { color: #555; }
.case-parts-card__media {
  position: relative;
  display: block;
  flex: 0 0 32%;
  max-width: 32%;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  line-height: 0;
}
.case-parts-card__image { display: block; width: 100%; height: auto; }
.case-parts-card__zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  color: #103a71;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .18);
  pointer-events: none;
  transition: transform .15s ease, background .15s ease;
}
.case-parts-card__media:hover .case-parts-card__zoom { background: #fff; transform: scale(1.06); }
.case-parts-card__zoom svg { display: block; }
@media (max-width: 600px) {
  .case-parts-card { gap: 12px; padding: 14px; border-radius: 10px; }
  .case-parts-card .case-parts-card__title { font-size: 17px; margin: 0 0 10px; }
  .case-parts-card__list { gap: 7px; }
  .case-parts-card .case-parts-card__item { font-size: 13.5px; line-height: 1.4; }
  .case-parts-card__media { flex-basis: 30%; max-width: 30%; }
  .case-parts-card__zoom { width: 26px; height: 26px; right: 5px; bottom: 5px; }
  .case-parts-card__zoom svg { width: 15px; height: 15px; }
}


/* 18.06.2026 v27 — per-photo description accordion (фото desc) port to prod.
   Triangle toggle at end of caption reveals .cs-photo-desc. Source: test2 v21.css.
   Mobile whole-case collapse and all other slider behavior left untouched. */
.cs-title { display: flex; align-items: center; flex-wrap: nowrap; column-gap: 2px; }
.cs-cap-text { min-width: 0; }
.cs-cap-toggle {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  padding: 4px 6px; margin: 0; cursor: pointer; line-height: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; color: #999;
}
.cs-cap-tri {
  display: inline-block; width: 0; height: 0;
  border-top: 6px solid currentColor; border-left: 5px solid transparent; border-right: 5px solid transparent;
  transition: transform 0.2s ease;
}
.cs-cap-toggle.open .cs-cap-tri { transform: rotate(180deg); }
.cs-photo-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #999; text-align: left; }
.cs-photo-desc[hidden] { display: none; }
.cs-photo-desc p { margin: 0 0 8px; }
.cs-photo-desc p:last-child { margin-bottom: 0; }
.cs-photo-desc h3, .cs-photo-desc h4 { font-size: 15px !important; font-weight: 600 !important; margin: 10px 0 4px !important; line-height: 1.3; }

/* ─── SEO interlinking block at the end of a case (.csl) ───────────────────────
   Class + model landing links built by cl_seo_links_html() into .cs-content
   (case-single.php). Native <details>: all links are in the HTML (indexable),
   the accordion only collapses them visually. --main-color is #103a71 (head.php). */
/* v33 (25.06.2026): bottom margin 2px → 16px so the case toggle button
   («Скрыть кейс»/«Закрыть кейс») that sits right after this links block no
   longer sticks to it. */
.csl { margin: 16px 0 16px; padding-top: 14px; border-top: 1px solid #e6e8ec; }
.csl__title { font-size: 16px; font-weight: 600; line-height: 1.3; color: #1a1a1a; margin: 0 0 10px; }
.csl__group { border: 1px solid #e6e8ec; border-radius: 8px; margin-bottom: 8px; overflow: hidden; background: #fff; }
.csl__group:last-child { margin-bottom: 0; }
.csl__group > summary { list-style: none; cursor: pointer; padding: 11px 14px; font-size: 15px; font-weight: 500; color: #1a1a1a; display: flex; align-items: center; gap: 9px; user-select: none; }
.csl__group > summary::-webkit-details-marker { display: none; }
.csl__group > summary::before { content: "\25B8"; color: var(--main-color, #103a71); font-size: 13px; line-height: 1; flex: 0 0 auto; transition: transform .2s ease; }
.csl__group[open] > summary::before { transform: rotate(90deg); }
.csl__group > summary:hover { background: #f6f8fb; }
.csl__list { list-style: none; margin: 0; padding: 2px 14px 12px 32px; }
/* Collapse explicitly, not via UA only: Safari/older-Firefox hide closed <details>
   content with display:none on the child, which an author `display:flex` would
   override (closed groups would show content). Scope display to state instead. */
.csl__group:not([open]) > .csl__list { display: none; }
.csl__group[open] > .csl__list { display: flex; flex-direction: column; gap: 7px; }
.csl__list li { margin: 0; }
.csl__list a { color: var(--main-color, #103a71); text-decoration: none; font-size: 14px; line-height: 1.35; }
.csl__list a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .csl__title { font-size: 15px; }
  .csl__group > summary { font-size: 14px; padding: 10px 12px; }
  .csl__list { padding: 2px 12px 10px 28px; gap: 6px; }
  .csl__list a { font-size: 13px; }
}

/* ── Visit date next to the price (e.g. «26 900 ₽ | 12.04.2026») ──────────────
   Rendered as a secondary <span> inside .cs-case-price. .cs-case-sep = the «|»
   divider, .cs-case-date = the date. Same SIZE as the price (1em → 24px / mobile
   19px) so the line reads evenly; kept softer gray (#8a8a8a, not the brand blue) so
   the date is clearly distinct from the price and the two don't blend together. */
.cs-case-date {
  font-size: 1em !important;
  font-weight: 400 !important;
  color: #8a8a8a !important;
  white-space: nowrap;
}
.cs-case-sep {
  display: inline-block;
  margin: 0 .42em;
  color: #cfcfcf !important;
  font-weight: 400 !important;
}

/* 25.06.2026 — case-body bullet lists. Bare <ul>/<ol> inside .cs-text rendered with the
   browser default (list-style-position:outside + padding-left:0): markers cramped against the
   edge and clipped by .cs-description{overflow:hidden} on narrow screens. Give a real hanging
   indent. Markers keep the default (text) colour — black. :not([class]) keeps .csl__list intact. */
.cs-text ul:not([class]),
.cs-text ol:not([class]){
  margin: 4px 0 11px;
  padding-left: 20px;
  list-style-position: outside;
}
.cs-text ul:not([class]){ list-style-type: disc; }
.cs-text ol:not([class]){ list-style-type: decimal; }
.cs-text ul:not([class]) > li,
.cs-text ol:not([class]) > li{
  margin: 0 0 3px;
  line-height: 1.45;
}

/* ── Per-case wrapper spacing (v38, widened v40) ──
   Every case sits in its own `.cs-item` wrapper, so the contextual heading
   top-margin (20px, applied to direct .service-block children) no longer
   matches and the inter-case gap collapses to the wrapper margin (10px on
   mobile). Restore it on the wrapper's first heading. Desktop already reads
   20px from `.cs-wrapper` margin, so this is a no-op there. */
.cs-item > .cs-case-heading { margin-top: 20px; }

/* Воздух между кейсами (владелец 31.07.2026: «чтобы визуально отделялись друг от
   друга»). Отступ вешаем на СОСЕДНИЙ .cs-item, а не на .cs-wrapper: у первого
   кейса верхний отступ остаётся прежним, отбитым от заголовка блока, меняется
   только промежуток между карточками. Поля схлопываются и берут больший из двух —
   20px карточки и 48px соседа, поэтому в сумме получается ровно 48px. */
.cs-item + .cs-item { margin-top: 48px; }
@media (max-width: 600px) { .cs-item + .cs-item { margin-top: 32px; } }

/* ══════════════════════════════════════════════════════════════════
   v39 (12.07.2026) — DESKTOP: expanded case wraps its text around the gallery.

   Collapsed state is unchanged: .cs-card stays a 2-column flex row and JS
   clips the text to the gallery height («Подробнее ▾»).
   Expanded (.cs-expanded): the card leaves flex, the gallery floats left at
   50%, the body text runs to its right and then CONTINUES FULL-WIDTH below
   the gallery — no more empty column under the photo, no manual right/bottom
   text split. Wide children (tables, parts card, thematic accordion, SEO
   block, embedded media, galleries) clear the float, so they start below the
   gallery at full width. The card clears its float at the end, so the next
   page section can never ride up beside the photo.
   Mobile (<=600px) is untouched: heading → price/date → gallery → text.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 601px) {
  .cs-card.cs-expanded {
    display: block;
  }

  /* 50% + 24px right margin reproduces the collapsed flex geometry
     (flex:0 0 50% + gap:24px), so the switch causes no width jump. */
  .cs-card.cs-expanded .cs-media {
    float: left;
    width: 50%;
    max-width: 50%;
    margin: 0 24px 16px 0;
  }

  /* height:auto beats the inline height JS writes for the collapsed state
     (it also clears it on expand — this is the belt-and-braces half). */
  .cs-card.cs-expanded .cs-content {
    display: block;
    height: auto !important;
  }

  .cs-card.cs-expanded::after {
    content: '';
    display: block;
    clear: both;
  }

  .cs-card.cs-expanded .cs-content table,
  .cs-card.cs-expanded .cs-content .case-parts-card,
  .cs-card.cs-expanded .cs-content .uta,
  .cs-card.cs-expanded .cs-content .csl,
  .cs-card.cs-expanded .cs-content .cs-wrapper,
  .cs-card.cs-expanded .cs-content .wp-block-gallery,
  .cs-card.cs-expanded .cs-content .gallery,
  .cs-card.cs-expanded .cs-content iframe,
  .cs-card.cs-expanded .cs-content video {
    clear: left;
  }
}

/* ══════════════════════════════════════════════════════════════════
   v40 (21.07.2026) — селектор кейсов «Выберите интересующие кейсы»
   v42 (22.07.2026) — селектор перенесён НАД список кейсов, сразу под
   заголовок блока (фильтр до контента, не после); изменены только
   отступы .csf. Имя v41 пропущено: занято откаченной итерацией.

   Два ряда горизонтально прокручиваемых чипов, отсортированных по
   количеству кейсов. Фильтрация целиком клиентская — кейсы уже в DOM,
   чипы только переставляют [hidden] на обёртках .cs-item.
   ══════════════════════════════════════════════════════════════════ */

/* Обёртка есть у КАЖДОГО кейса (не только у хвоста) — селектор должен уметь
   спрятать любой. Зеркало существующего правила .cs-tail[hidden]. */
.cs-item[hidden] { display: none !important; }

/* В текущей выборке может не остаться хвоста — тогда кнопке нечего делать.
   Своё !important, потому что базовое правило ставит display:flex. */
.cs-show-more-wrap[hidden] { display: none !important; }

/* Цель прокрутки после выбора чипа — тот же отступ под липкую шапку,
   что у якоря #cases ([id]{scroll-margin-top:110px} в main.css). */
.cs-heading[data-cs-top] { scroll-margin-top: 110px; }

/* v42: селектор стоит между заголовком блока и первым кейсом. Верхний отступ
   схлопывается с margin-bottom заголовка/подзаголовка (8/20px) до 20px; нижний —
   с margin-top заголовка первого кейса (20px, сквозь пустую обёртку .cs-item)
   до 26px. */
.csf {
  margin: 20px 0 26px;
  padding: 18px 20px 16px;
  background: #f6f7f9;
  border-radius: 14px;
}

.csf-title {
  margin: 0 0 14px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #1a1a1a;
}

.csf-row + .csf-row { margin-top: 14px; }

.csf-label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  line-height: 1.2;
  color: #7a7f87;
}

/* Полоса прокрутки + правая маска-подсказка, что ряд едет вбок. */
.csf-scrollwrap { position: relative; }

.csf-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.csf-scroll::-webkit-scrollbar { display: none; }

.csf-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 15px;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #e0e3e8;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  -webkit-appearance: none;
}

.csf-chip i {
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  color: #9aa0a8;
}

.csf-chip:hover { border-color: #b9c2cf; }

.csf-chip.is-active {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

.csf-chip.is-active i { color: rgba(255, 255, 255, .7); }

.csf-chip:focus-visible {
  outline: 3px solid rgba(16, 58, 113, .4);
  outline-offset: 2px;
}

/* Комбинация, которой нет ни у одного кейса — видно, но нажать нельзя. */
.csf-chip[disabled] {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

.csf-fade {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(246, 247, 249, 0) 0%, #f6f7f9 75%);
  transition: opacity .15s ease;
}

.csf-arrow {
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: #fff;
  color: #4a5058;
  border: 1px solid #e0e3e8;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  transition: opacity .15s ease, border-color .15s ease;
  -webkit-appearance: none;
}

.csf-arrow:hover { border-color: #b9c2cf; }

/* Доехали до конца ряда — подсказка не нужна. */
.csf-row.is-end .csf-fade,
.csf-row.is-end .csf-arrow {
  opacity: 0;
  pointer-events: none;
}

.csf-empty {
  margin: 12px 0 0 !important;
  font-size: 15px !important;
  color: #7a7f87;
}

@media (max-width: 600px) {
  .csf {
    margin: 18px 0 22px; /* v42: моб. ритм 18px после заголовка (.cs-heading mb=16px схлопнется) */
    padding: 16px 14px 14px;
    border-radius: 12px;
  }

  .csf-title { font-size: 17px !important; margin-bottom: 12px !important; }

  .csf-chip { padding: 9px 13px; font-size: 14px; }

  /* На тач-экране ряд листается пальцем — кнопка-стрелка лишняя,
     остаётся только градиентная подсказка. */
  .csf-arrow { display: none; }

  .csf-fade { width: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Отдельные страницы кейсов (ТЗ 27.07.2026) — тизер + сама страница кейса.
   Кейс без опубликованной страницы ни одного из этих классов не получает, поэтому
   существующая вёрстка кейсов не затронута.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Тизер ──
   🔴 Владелец 30.07.2026 (по своему макету): титульное фото слева РОВНО такого же
   размера, как у обычного кейса на главной, а направо уходит всё остальное —
   заголовок, цена с датой, анонс, ссылка и ряд миниатюр. Это ОТМЕНЯЕТ вариант
   29.07.2026 с узкой колонкой фото 280px и заголовком над карточкой.
   Телефон = поведение по умолчанию (заголовок, цена, фото, миниатюры, текст,
   ссылка — порядок как был), ПК = @media 601px. */
.cs-teaser .cs-tcard { display: block; }
/* Колонка-флекс: ряд миниатюр печатается в конце разметки, а стоять должен внизу
   правой колонки — это делает auto-отступ в десктопном блоке ниже.
   На ТЕЛЕФОНЕ ряда миниатюр нет вовсе: тема гасит .cs-bottom-row правилом
   `display:none` в @media(max-width:600px), и это поведение кейсов не менялось —
   поэтому переносить его тут некуда и незачем. */
.cs-teaser .cs-tbody { display: flex; flex-direction: column; margin-top: 10px; }
/* Ссылка внутри флекс-колонки становится блоком: без этого кликабельной была бы
   вся ширина колонки, а не сама строка. */
.cs-teaser .cs-tbody .cs-readmore { align-self: flex-start; }
.cs-teaser .cs-text--teaser > *:first-child { margin-top: 0; }
.cs-teaser .cs-text--teaser > *:last-child { margin-bottom: 0; }
/* Анонс в двух вариантах (владелец 30.07.2026): короткий для телефона, длинный для
   компьютера. Печатаются оба, показывается один. Когда длинный не заполнен,
   case-single.php печатает ОДИН блок без этих классов — он виден везде. */
.cs-teaser .cs-text--tea-d { display: none; }

/* Заголовок тизера — ссылка на страницу кейса. Цвет наследуется: синим он бы
   спорил с ценой, которая тут же под ним и уже синяя. */
.cs-case-heading--teaser a { color: inherit; text-decoration: none; }
.cs-case-heading--teaser a:hover { color: #103a71; }

/* «Читать полностью →» — ссылка, а не кнопка: это переход на страницу, и он должен
   читаться как ссылка. display НЕ flex: во флекс-контейнере пробел между словом и
   стрелкой схлопывается. line-height 2.3 отбивает ссылку от последней строки
   описания (владелец 29.07.2026). */
.cs-readmore {
  display: inline;
  margin-top: 12px;
  font-weight: 600;
  font-size: 15px;
  line-height: 2.3;
  color: #103a71;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.cs-readmore:hover { color: #24478f; }
.cs-readmore:focus-visible { outline: 2px solid #103a71; outline-offset: 3px; }

/* ── Аккордеон под слайдером тизера (ТЗ 18.08.2026) ──
   Задача — не растить высоту ленты тизеров на телефоне: в закрытом виде от анонса
   и ссылки остаётся ОДНА строка с подписью и треугольником. Подпись выбирает
   редактор в карточке кейса из справочника «Заголовки аккордеона».
   🔴 На КОМПЬЮТЕРЕ аккордеона нет (решение владельца 18.08.2026): правая колонка
   тизера жёсткой высоты и всё равно кончается на нижней кромке снимка, поэтому
   спрятанный анонс оставил бы там пустоту. Разметка при этом ОДНА на все ширины:
   строку-кнопку гасим, а тело печатаем display:contents — анонс и ссылка остаются
   теми же элементами колонки .cs-tbody, что и до правки, поэтому вся десктопная
   геометрия (обрезка анонса по строкам, прижатый к низу ряд миниатюр) не меняется.
   По этой же причине правила десктопного блока обращаются к анонсу и ссылке
   ПОТОМКАМИ, а не прямыми детьми .cs-tbody. */
.cs-tacc-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  width: 100%; margin: 0; padding: 10px 0;
  background: none; border: 0; border-top: 1px solid #ececec;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3;
  color: #1a1a1a; text-align: left; cursor: pointer;
}
.cs-tacc-head:focus-visible { outline: 2px solid #103a71; outline-offset: 2px; }
/* Треугольник ровно тот же, что у подписи к фото (.cs-cap-tri): у всех раскрывашек
   кейса один язык. */
.cs-tacc-tri {
  flex: 0 0 auto; display: inline-block; width: 0; height: 0;
  border-top: 6px solid #103a71; border-left: 5px solid transparent; border-right: 5px solid transparent;
  transition: transform .2s ease;
}
.cs-tacc-head.open .cs-tacc-tri { transform: rotate(180deg); }
.cs-tacc-body { margin-top: 6px; }
.cs-tacc-body[hidden] { display: none; }

@media (min-width: 601px) {
  .cs-teaser .cs-tacc-head { display: none; }
  .cs-teaser .cs-tacc-body,
  .cs-teaser .cs-tacc-body[hidden] { display: contents; }
}


@media (min-width: 601px) {
  /* Сетка, а не флекс: справа ДВА блока друг под другом (заголовок с ценой и всё
     остальное), а слева одно фото на всю их высоту — флексом такое пришлось бы
     собирать лишней обёрткой.
     Колонка фото 50% при промежутке 24px — это ровно геометрия обычного кейса
     (`.cs-media{flex:0 0 50%}` + `gap:24px` у .cs-card), поэтому фото в тизере и
     фото в кейсе на главной одного размера. Владелец 30.07.2026: «картинку
     титульную такого же размера оставить большого, как в кейсах на главной». */
  .cs-teaser .cs-tcard {
    display: grid;
    grid-template-columns: 50% minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 24px;
  }
  /* max-width снимаем: общее правило .cs-media{max-width:50%} считает проценты от
     всей карточки, а не от своей колонки, и урезало бы фото ещё раз. */
  .cs-teaser .cs-media { grid-column: 1; grid-row: 1 / span 2; align-self: start; max-width: none; }
  .cs-teaser .cs-thead { grid-column: 2; grid-row: 1; min-width: 0; }
  /* 🔴 Правая колонка кончается на нижней кромке САМОГО СНИМКА, а не подписи под
     ним (владелец 31.07.2026: «нижний край титульной картинки совпадает с нижним
     краем минифоток справа»). Раньше колонка тянулась до низа всей медиа-колонки,
     и ряд миниатюр висел на 47px ниже снимка — ровно на высоту подписи.
     height:0 + min-height:100% — колонка не участвует в расчёте высоты строк грида
     (иначе длинный анонс растягивал бы карточку), а получает готовую высоту строки;
     нижний отступ = блок подписи: 8px отступа сверху + 2.8em при кегле 14px.
     Пол в max() держит две строки анонса: если снимок ниже, чем нужно этим строкам
     (узкое окно), карточка растёт вниз, как было до правки, а не режет текст.
     Первый min-height — запасной для браузеров без max(): без него колонка осталась
     бы нулевой высоты и спрятала миниатюры совсем. */
  .cs-teaser .cs-tbody {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin-top: 0;
    height: 0;
    min-height: 231px;
    min-height: max(100%, 231px);
    padding-bottom: calc(14px * 2.8 + 8px);
    overflow: hidden;
  }
  /* Миниатюры возвращаются в конец правой колонки и прижимаются к её низу:
     auto-отступ сверху сажает ряд на нижнюю кромку снимка. Ссылка и ряд миниатюр
     не сжимаются — место под них освобождает только анонс. */
  .cs-teaser .cs-tbody .cs-readmore { flex: none; }
  .cs-teaser .cs-tbody > .cs-bottom-row { order: 0; flex: none; margin-top: auto; margin-bottom: 0; padding-top: 10px; }
  /* Анонс режется по целым строкам (счётчик --tea-lines ниже), а flex-shrink —
     страховка: если места оказалось меньше расчётного, колонка всё равно не
     вылезет за кромку снимка. */
  .cs-teaser .cs-tbody .cs-text--teaser { flex: 0 1 auto; min-height: 0; overflow: hidden; }
  .cs-teaser .cs-tbody .cs-text--teaser > * {
    display: -webkit-box;
    -webkit-line-clamp: var(--tea-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Заголовок тизера — не длиннее двух строк: третья строка съедала бы анонс и
     опускала ряд миниатюр ниже снимка. Полное название — на странице кейса. */
  .cs-teaser .cs-case-heading--teaser { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Подпись к фото на компьютере снова ВИДНА (правила `display:none` больше нет):
     в макете владельца она стоит под большой фотографией. Прятали её только из-за
     узкой колонки 280px, которой больше нет.
     Анонс: на компьютере длинный вместо короткого. */
  .cs-teaser .cs-text--tea-m { display: none; }
  .cs-teaser .cs-text--tea-d { display: block; }
  /* 🔴 Подпись к фото — РОВНО две строки (владелец 30.07.2026: «при листании лента
     слайдов дёргается вниз/вверх»). У каждого слайда своя подпись, и её высота
     гуляла 20/39/59px (одна, две, три строки) — вместе с ней прыгала вся карточка
     375/395/415px, а с ней и ряд миниатюр, прижатый к низу правой колонки. У
     обычного кейса этой болезни нет: там скрипт после каждого слайда пересчитывает
     высоту текстовой колонки, а у тизера пересчитывать нечего.
     Высота ЖЁСТКАЯ, а не min-height: минимум чинит только короткие подписи, а
     дёргалось и на длинных. 2.8em = две строки при line-height 1.4, поэтому правило
     переживёт смену кегля. align-items:flex-start — иначе одна строка повисла бы по
     центру двухстрочной коробки, с зазором под фотографией.
     Текст не теряется: подпись остаётся в разметке целиком (её читают поиск и
     озвучка), обрезается только показ, полная версия — на странице кейса. */
  .cs-teaser .cs-title { height: 2.8em; align-items: flex-start; overflow: hidden; }
  .cs-teaser .cs-cap-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Сколько строк анонса помещается над нижней кромкой снимка. Высота снимка = 9/16
   от половины ширины карточки, то есть растёт вместе с окном; из неё вычтены
   заголовок в две строки, цена, ссылка и ряд миниатюр. Пороги подняты с запасом:
   лишняя строка опустила бы миниатюры ниже снимка, а недостающая — нет, пустоту
   забирает auto-отступ над рядом. Замеры на 1311/1440/1600/1920. */
@media (min-width: 1440px) { .cs-teaser { --tea-lines: 3; } }
@media (min-width: 1550px) { .cs-teaser { --tea-lines: 4; } }
@media (min-width: 1655px) { .cs-teaser { --tea-lines: 5; } }
@media (min-width: 1760px) { .cs-teaser { --tea-lines: 6; } }

/* ── Страница кейса ──
   Текстовой колонки .cs-content в этом виде нет вовсе (case-single.php), поэтому
   .cs-card остаётся с одним ребёнком. Возвращаем блочный поток и снимаем
   десктопное ограничение .cs-media{flex:0 0 50%} — иначе слайдер занимал бы
   половину ширины, а справа была бы пустота. */
.cs-page .cs-card { display: block; }
.cs-page .cs-media { max-width: 100%; }

.cpage-desc { max-width: 100%; }
.cpage-desc .cs-text { margin-top: 0; }
.cpage-desc .cs-text + .cs-text { margin-top: 14px; }

/* Специфичность нарочно 0,2,0: в main.css заголовки внутри .editor заданы
   селектором с элементом, и одиночный класс её не перебивает. */
.cpage .cpage-h1 {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 18px;
  color: #000;
}
@media only screen and (max-width: 768px) {
  .cpage .cpage-h1 { font-size: 24px; }
}

/* ── Блок «что дальше» под кейсом ──
   Страница кейса ничего не продаёт и никуда не ведёт: ленты разделов на ней нет.
   Два выхода обратно в воронку — запись и соседние работы по этому же автомобилю. */
.cnext { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(0, 0, 0, .1); }
.cnext-cta { margin: 0 0 26px; }
/* Класс кнопки темы красит фон через --main-color, а он в этой теме достался от
   донора ЗЕЛЁНЫМ (main.css) — марочный синий пишем явно, не через переменную. */
.cnext .cnext-btn {
  background: #103a71;
  color: #fff;
  border: 0;
  cursor: pointer;
  padding: 14px 28px;
  font-size: 16px;
  line-height: 1.2;
  border-radius: 4px;
  transition: background .15s ease;
}
/* Класс темы `md-main-color-btn` рассчитан на кнопку из ДВУХ детей — текст и
   стрелка: `display:flex; justify-content:space-between` + жёсткая ширина
   `28.65vw` (main.css). Здесь ребёнок один, поэтому на ПК кнопка была вчетверо
   шире надписи (замер 433px на текст 240px), а надпись прижата к левому краю —
   на телефоне это читалось как «надпись не по центру» (владелец, 30.07.2026).
   Ширину отдаём содержимому (inline-flex, иначе flex-контейнер блочный и всё
   равно тянется на всю строку), надпись ставим по центру. На телефоне ширина
   остаётся 100% — там кнопка во всю строку задумана, центрирование её и чинит. */
.cnext .cnext-btn { display: inline-flex; width: auto; justify-content: center; }
.cnext .cnext-btn:hover { background: #24478f; }
.cnext .cnext-btn:focus-visible { outline: 2px solid #103a71; outline-offset: 3px; }

/* 21.08.2026, владелец: «заголовок "Другие работы" очень мелкий, сопоставим с
   заголовками кейсов, давай как обычные заголовки у нас идут». Было 22px узким
   фирменным начертанием — при 17px Arial у названий кейсов это читалось как один
   уровень. Теперь ровно спецификация обычного заголовка раздела сайта
   (h2.cs-heading / .editor h2): 50px/60px на ПК, 26px/40px ниже 700px. */
.cnext-h {
  font-size: 50px !important;
  font-weight: 600 !important;
  line-height: 60px !important;
  margin: 0 0 20px !important;
  color: #000;
}
.cnext-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cnext-card { min-width: 0; }
.cnext-ph { display: block; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.cnext-ph img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cnext-t { font-size: 17px !important; font-weight: 400 !important; line-height: 1.3 !important; margin: 0 0 6px !important; }
.cnext-t a { color: #000; text-decoration: none; }
.cnext-t a:hover { color: #103a71; }
.cnext-price {
  font-family: 'Hyundai', Inter, Arial, sans-serif;
  font-size: 17px;
  color: #103a71;
  margin: 0;
  line-height: 1.1;
}
/* С 10.08.2026 плиток до шести (было три), то есть на ПК два ряда по три. На
   планшете три колонки дают карточку уже 200px — заголовок работы туда не влезает,
   поэтому промежуточный шаг в две колонки. */
@media only screen and (max-width: 900px) {
  .cnext-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 768px) {
  .cnext-grid { grid-template-columns: 1fr; gap: 18px; }
  .cnext .cnext-btn { width: 100%; }
}
@media only screen and (max-width: 699px) {
  .cnext-h {
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    margin-bottom: 18px !important;
  }
}


/* ── Компактный УТП на странице кейса (владелец 10.08.2026) ──
   Блок живёт ВНУТРИ текста кейса (после «Полезной информации», перед списками
   ссылок), а не в ритме секций .um-sec, который на странице кейса не работает —
   поэтому отступы задаёт своя обёртка. Само наполнение (.wc-block/.wc-compact,
   плашка .akpp-note, кнопки .wc-buttons) — та же семья правил, что на лендинге:
   один и тот же вид блока на обеих поверхностях, без второго набора стилей. */
.cs-utp { margin: 28px 0 4px; }
.cs-utp .wc-block { margin: 0 !important; }
@media only screen and (max-width: 768px) {
  .cs-utp { margin: 22px 0 4px; }
}

/* Пункты — маркированный список (владелец 19.08.2026: «и всё сплошным текстом,
   может, сделать здесь маркированный список лучше»). Точка нарисована ::before,
   а не list-style: пункт это <div>, и переводить его в <li> пришлось бы сразу в
   трёх местах вывода .wc-block (лендинг, главная, кейс). Жирность внутри пункта
   ставит оператор кнопкой «Ж» в панели — автоматической больше нет. */
.cs-utp .wc-list { margin: 0; }
.cs-utp .wc-item { position: relative; padding-left: 16px; margin-bottom: 6px; }
.cs-utp .wc-item:last-child { margin-bottom: 0; }
.cs-utp .wc-item::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: #262626; }

/* ── Подвал прижат к низу окна ──
   На короткой странице (один кейс) подвал висел посередине экрана. */
body.cpage-body { display: flex; flex-direction: column; min-height: 100vh; }
body.cpage-body > footer.footer { margin-top: auto; }

/* Воздух перед подвалом. Блок «что дальше» упирался в тёмную полосу подвала
   вплотную (владелец 10.08.2026): у шаблона страницы кейса нет нижнего отступа,
   а на лендингах его даёт последняя секция. Берём тот же зазор, что и там, — 48px
   (замерено на /gla/), чтобы страница кейса не выбивалась из ритма сайта. */
body.cpage-body section.editor.cpage { padding-bottom: 48px; }
@media only screen and (max-width: 768px) {
  body.cpage-body section.editor.cpage { padding-bottom: 32px; }
}

/* ── Хлебные крошки на странице кейса ──
   В main.css этой темы контейнер крошек погашен (display:none) — на Мерседесе
   их не показывали нигде, в отличие от БМВ и Хендая, где та же тема оставлена
   как есть. Разметку крошек шаблон страницы кейса печатал, но её никто не
   видел: под шапкой оставалась пустая полоса. Возвращаем крошки ТОЧЕЧНО, только
   на странице кейса (там это единственная навигация), не трогая /contacts/ —
   единственную другую страницу Мерседеса с такой разметкой.
   Заголовки кейсов длинные: на большом экране строке разрешён перенос, а
   фиксированная высота полосы снята — иначе вторая строка налезала бы на
   заголовок. На телефоне переноса НЕТ намеренно: там тема прокручивает крошки
   по горизонтали (overflow-x у контейнера, nowrap у ссылок), и перенос сломал
   бы эту прокрутку. */
body.cpage-body .breadcrumbs__container { display: flex; }
@media only screen and (min-width: 769px) {
  body.cpage-body .breadcrumbs__container { flex-wrap: wrap; row-gap: 4px; }
  body.cpage-body section.breadcrumbs.md-after-transparent-header { height: auto; }
}
/* Своего шрифта у крошек в теме нет — они наследуют от body. Пишем Inter:
   это единственное начертание, у которого в main.css есть настоящий @font-face,
   поэтому крошки гарантированно совпадут с остальным текстом страницы. Стеки
   `daimlercac-regular` и `MBCorpoS`, приехавшие из темы Mercedes, здесь фантомные —
   @font-face для них нет нигде, и текст молча рисовался бы Arial. */
body.cpage-body .breadcrumbs a { font-family: Inter, Arial, sans-serif; }

/* Разделитель крошек — шеврон вместо палочки (владелец 10.08.2026). В теме это
   ::before с размерами палочки (width/height/background-color в vw), поэтому все
   три свойства надо погасить, иначе глиф получит нулевую ширину и не отрисуется.
   Отступы НЕ трогаем — ритм полосы остаётся тот же, что был у палочки.
   Размер глифа = размер ссылки крошки × 1.3: «›» рисуется примерно вполовину
   кегля, и в размер ссылки он выглядел бы мельче прежней палочки.
   :first-child::before в теме погашен display:none — первую крошку не заденет.
   Правило точечное (body.cpage-body): крошки лендингов остаются как были. */
body.cpage-body .breadcrumbs__item::before {
  content: "\203A";
  width: auto;
  height: auto;
  background-color: transparent;
  color: #8C8C8C;
  font-size: 0.9479166667vw;
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  body.cpage-body .breadcrumbs__item::before { font-size: 4.0625vw; }
}

/* ── Меню сайта на странице кейса: убрано, как на БМВ (владелец, 30.07.2026) ──
   «уберем меню со страниц кейсов как на бмв, оставляем как на бмв хлебные
   крошки только». Полный паритет с BMW (`um-cases-port.css`).
   🔴 30.07.2026 владелец сняла исключение для телефона («и на мобильном остался
   бургер»): убираем и кнопку бургера, и саму выезжающую панель, на обоих сайтах.
   Прежнее возражение («без бургера страница кейса — тупик», принято 29.07.2026)
   ОТМЕНЕНО решением владельца; выход со страницы дают хлебные крошки, ссылки
   внутри кейса, блок «что дальше» и подвал.
   Панель и кнопка — РАЗНЫЕ элементы: `nav.header__nav` на ПК это строка меню, а
   на телефоне полноэкранная шторка (main.css: position:fixed при `.header.open`);
   кнопка — `.header__btn-wrap`. Прячем обе и на всех ширинах: кнопка без панели
   открывала бы пустоту, панель без кнопки не открыть. */
body.cpage-body nav.header__nav,
body.cpage-body .header__btn-wrap { display: none; }

/* ── ПК: воздух под логотипом ──
   Убрав строку меню, мы оставили логотип впритык к нижнему краю чёрной шапки:
   сверху 33px, снизу 0 (владелец 30.07.2026: «на пк приклеивается эмблема
   Мерседес»). На лендинге это место занимала строка меню — от логотипа до низа
   шапки там 58px. Возвращаем симметрию: те же 33px снизу, шапка 135px вместо 102.
   🔴 Селектор из ЧЕТЫРЁХ частей не случаен: тема гасит этот отступ правилом
   `.header.md-bg-transparent .header-v2{padding-bottom:0}` (0,3,1), и короткое
   `body.cpage-body .header-v2` (0,2,1) ему проигрывает — правило молча не
   применяется, высота остаётся 102px. */
@media only screen and (min-width: 769px) {
  body.cpage-body .header.md-bg-transparent .header-v2 { padding-bottom: 33px; }
}
/* ── Подпись «Сервис Hyundai в Москве» под названием компании ──
   Владелец, 10.08.2026: страница кейса — самостоятельная точка входа из поиска
   и рекламы, шапка должна сразу отвечать «куда я попал». Разметку печатает
   header2.php по переменной $um_hd_tagline (её задаёт только template-case.php).
   Строка нарочно вторичная: меньше названия компании (13.4px против 26px) и
   серая, а не белая, — это не слоган.
   Виден блок только на телефоне: на ПК вся .logo-text-v2 скрыта (custom.css,
   @media min-width:769px), там на её месте лежит логотип-картинка.
   Шрифт наследуется от блока логотипа: так подпись гарантированно совпадает
   с соседней строкой отзывов, чем бы её ни рисовала тема. Место под шапку на
   телефоне держит padding-top у body (main.css, 25vw); строка низкая, в резерв
   укладывается. */
body.cpage-body .um-hd-tagline {
  font-family: inherit;
  font-size: 13.4px;
  font-weight: 400;
  line-height: 1.15;
  color: #9a9a9a;
  white-space: nowrap;
  margin-bottom: 2px;
}

/* Лента-меню, которую тема разворачивает по скроллу ВНУТРИ <header>, и стрелки
   её прокрутки. На странице кейса в ней те же ссылки-якоря, которых здесь нет.
   Селектор с id перебивает `.mobile-scroll-menu.visible` без !important. */
body.cpage-body #sticky-menu,
body.cpage-body .scroll-arrow { display: none; }
@media only screen and (max-width: 768px) {
  /* 🔴 Вся мобильная шапка переводится на высоту ПО СОДЕРЖИМОМУ — все четыре
     уровня сразу, иначе нижний жёсткий размер перебивает верхний auto:
       .header      17vw?  нет — main.css задаёт ей высоту, а место под неё
                    держит отступ сверху у body (шапка position:fixed);
       .header-v2   height:17vw  — резерв под логотип И под ленту-меню;
       .main-header-v2 height:60px  — ПИКСЕЛИ;
       .logo-container-v2 height:60px — тоже ПИКСЕЛИ, при картинке в 12.5vw.
     Смесь px и vw = высота шапки перестаёт быть vw-выражением ниже ~480px:
     на 320px контейнер логотипа (60px) уже НЕ помещался в шапку 17vw (54.4px)
     и вылезал за её нижний край — это было и до правки, просто пряталось за
     резервом 25vw. Теперь ленты нет, резерв считает скрипт в template-case.php
     по фактической высоте шапки, поэтому шапка обязана быть честной.
     Текстовому логотипу обнуляем `margin-bottom:8vw` (31px на 390px) — при
     height:auto он вливался бы в шапку пустотой (грабли BMW №14). */
  body.cpage-body header.header,
  body.cpage-body .header-v2,
  body.cpage-body .main-header-v2,
  body.cpage-body .logo-container-v2 { height: auto; }
  body.cpage-body .logo-text-v2 { margin-bottom: 0; }
  /* Воздух снизу чёрной шапки. Было 6px (паритет с БМВ) — при двух строках текста
     это читалось нормально, но с третьей (подпись «Сервис Hyundai в Москве»,
     10.08.2026) текст стал ниже логотипа-звезды, и владелец увидела, что строка
     отзывов почти упирается в нижний край: сверху 15.5px, снизу 6px.
     Ставим ровно столько же, сколько сверху: 4vw = padding-top шапки (~1.99vw) +
     margin-top у .header-v2 (2vw). В vw, а не в px, чтобы симметрия держалась на
     любой ширине телефона. Место под шапку считает скрипт в template-case.php по
     её фактической высоте, поэтому крошки уезжают вниз вместе с ней. */
  body.cpage-body header.header { padding-bottom: 4vw; }
  /* Крошки слева, как заголовок и текст под ними. Тема на телефоне центрует ряд
     (`@media max-width:768px .breadcrumbs .wrapper{justify-content:center}`,
     main.css) — правило безобидно, пока цепочка длиннее контейнера: у скроллера
     центрирование ничего не двигает. 10.08.2026 из крошек убрали название кейса,
     цепочка стала короче ширины (258px против 336px на 390px) — и ряд уехал в
     середину, не совпав с левым краем H1. Гасим центрирование только на странице
     кейса: на остальных страницах Мерседеса `.breadcrumbs__container` вообще
     скрыт (main.css), так что этот селектор — единственное место, где крошки
     видны. */
  body.cpage-body section.breadcrumbs .wrapper { justify-content: flex-start; }
  body.cpage-body .header-v2 { padding-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Просмотр фотографии кейса на весь экран (владелец, 29.07.2026)
   Разметку создаёт assets/js/cases-lightbox-v1.js — в HTML страницы её нет,
   пока фотографию не открыли. Работает во всех видах кейса: обычном, тизере
   и на отдельной странице кейса.
   ══════════════════════════════════════════════════════════════════════════════ */
/* Курсор-лупа только там, где просмотр реально откроется: у видео свои
   элементы управления, и клик по нему просмотр не открывает. */
.cs-slide img { cursor: zoom-in; }

.cslb {
  position: fixed;
  inset: 0;
  z-index: 100000;            /* выше липких плашек и шапки темы */
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 68px;
  -webkit-user-select: none;
  user-select: none;
}
.cslb[hidden] { display: none; }
/* Страница под просмотром не прокручивается: иначе колесо уводит фон,
   а на телефоне из-под просмотра выезжает шапка. */
html.cslb-lock, html.cslb-lock body { overflow: hidden; }

.cslb-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cslb-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 132px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  background: #111;
}
.cslb-cap {
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  max-width: 900px;
}

.cslb-btn {
  position: absolute;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease;
}
.cslb-btn:hover { background: rgba(255, 255, 255, .24); }
.cslb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cslb-btn[hidden] { display: none; }

.cslb-close { top: 14px; right: 14px; width: 44px; height: 44px; }
.cslb-arrow { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.cslb-prev { left: 14px; }
.cslb-next { right: 14px; }

.cslb-count {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  letter-spacing: .04em;
}
.cslb-count[hidden] { display: none; }

/* Телефон: кнопки меньше и ближе к краям, подпись не съедает кадр. */
@media (max-width: 768px) {
  .cslb { padding: 52px 10px 44px; }
  .cslb-img { max-height: calc(100vh - 112px); }
  .cslb-close { top: 8px; right: 8px; width: 38px; height: 38px; }
  .cslb-arrow { width: 40px; height: 40px; }
  .cslb-prev { left: 6px; }
  .cslb-next { right: 6px; }
  .cslb-cap { font-size: 13px; }
  .cslb-count { bottom: 10px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ТЕЛЕФОН: место под кадр держится ДО инициализации слайдера (25.08.2026)
   Карточка приходит с сервера без фото и без подписи — их строит скрипт на
   DOMContentLoaded. На телефоне высоту кадра задаёт содержимое, поэтому в
   этот момент каждый кейс подрастал на 266px (замер главной: кадр 219 +
   подпись 47), список уезжал вниз, и тап по «Открыть кейс» попадал в
   заголовок соседнего кейса, то есть в ссылку на его страницу.
   Пока на .cs-wrapper висит .cs-pre (ставит case-single.php): бокс кадра
   держит пропорция первого слайда (--cs-ar), короткий текст уже скрыт —
   ровно так, как его скроет скрипт на телефоне. init() снимает класс, и
   дальше всё считается по реальному содержимому, как раньше.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .cs-wrapper.cs-pre .cs-main { aspect-ratio: var(--cs-ar, 16 / 9); }
  .cs-wrapper.cs-pre .cs-card .cs-text--short { display: none; }
}