/* ══════════════════════════════
   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 {
  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: 'daimlercac-regular', 'MBCorpoS', Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #3366cc !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(51, 102, 204, 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(51, 102, 204, 0.45);
}

.cs-show-more:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(51, 102, 204, 0.35);
}

.cs-show-more:focus-visible {
  outline: 3px solid rgba(51, 102, 204, 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 {
    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 #3366cc; border-bottom: 2px solid #3366cc;
  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: 'daimlercac-regular', 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: #3366cc;
  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 #3366CC (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, #3366cc); 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, #3366cc); 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;
}

/* ── Batch-reveal tail spacing (v38) ──
   Tail cases sit in their own `.cs-tail` 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-tail[data-cs-tail] > .cs-case-heading { margin-top: 20px; }

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