:root {
  --as24ci-bg: #f3f4f6;
  --as24ci-border: #e5e7eb;
  --as24ci-border-soft: #e5e7eb;
  --as24ci-muted: #646970;
  --as24ci-heading: #1D2327;
  --as24ci-text: #1D2327;

  --as24ci-ci: #F5F200;
  --as24ci-ci-soft: #FFFDE0;
  --as24ci-ci-dark: #8A7B00;

  --as24ci-primary: #004b8d;
  --as24ci-primary-hover: #003a6d;
  --as24ci-primary-soft: #dbeafe;

  --as24ci-ok: #00a32a;
  --as24ci-ok-soft: #e6f4ea;
  --as24ci-bad: #d63638;
  --as24ci-bad-soft: #fee2e2;

  --as24ci-radius: 3px;
}

/* Base typography – inherits from active theme by default */
.as24ci-page,
.as24ci-page * {
  font-family: var(--as24ci-font-family, inherit);
  font-size: var(--as24ci-font-size-base, inherit);
  line-height: 1.6;
  color: var(--as24ci-text);
}

/* Border-box on layout containers, cards, form controls and buttons keeps
   padding inside the element width so they never exceed their parent. This is
   scoped (rather than a universal `*` reset) to avoid altering small elements
   that intentionally combine an explicit width with padding (e.g. the EnVKV
   energy-scale bars). */
.as24ci-page,
.as24ci-page-inner,
.as24ci-layout-wide,
.as24ci-layout-left,
.as24ci-card,
.as24ci-energy-advanced,
.as24ci-contact-layout,
.as24ci-contact-col-form,
.as24ci-contact-col-seller,
.as24ci-card-contact,
.as24ci-contact-field input,
.as24ci-contact-field textarea,
.as24ci-test-drive-fields select,
.as24ci-hero-cta-button,
.as24ci-contact-submit,
.as24ci-related-more-search-btn {
  box-sizing: border-box;
}

/* Page background & width */
.as24ci-page {
  background: var(--as24ci-bg);
  padding: 32px 0 48px;
  max-width: none;
}

.as24ci-page-inner {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto 32px;
}

/* Mobile horizontal-overflow safeguard for third-party themes.

   Grid and flex children default to `min-width: auto`, which keeps their
   intrinsic content min-width and prevents them from shrinking below it. In
   the demo theme the surrounding content area happens to be wide enough to
   hide this, but in many real WordPress themes the plugin output is rendered
   inside a narrower/padded content column, so the upper layout columns
   (gallery, spec card, sidebar) kept their desktop intrinsic width and pushed
   the page wider than the mobile viewport.

   The lower contact section never showed the bug because it already sets
   `min-width: 0` on its grid columns (.as24ci-contact-col-*). Mirroring that
   constraint on the upper layout columns/cards keeps every section inside the
   available content width without resorting to a blunt `overflow-x: hidden`
   that would only hide oversized elements. */
.as24ci-layout-wide,
.as24ci-layout-left,
.as24ci-layout-right,
.as24ci-card {
  min-width: 0;
  max-width: 100%;
}

/* Some third-party themes do not ship the common `img { max-width: 100%; }`
   reset that the demo theme provides. Cap plugin media so an intrinsically
   wide image can never widen its card past the mobile viewport. */
.as24ci-page img {
  max-width: 100%;
}

/* Cards / panels – similar to backend cards */
.as24ci-card {
  background: #ffffff;
  border-radius: var(--as24ci-border-radius, 12px);
  border: 1px solid var(--as24ci-border-soft);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  padding: 20px 22px;
  margin-bottom: 18px;
}

/* Typography */
.as24ci-title-main {
  margin: 0;
  font-size: var(--as24ci-font-size-title, 30px);
  line-height: 1.3;
  font-weight: var(--as24ci-font-weight-title, 700);
  color: var(--as24ci-color-title, inherit);
}

.as24ci-card-title {
  margin: 0 0 12px;
  font-size: var(--as24ci-font-size-title, 20px);
  font-weight: var(--as24ci-font-weight-title, 700);
  color: var(--as24ci-color-title, inherit);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.as24ci-equip-subtitle {
  margin: 18px 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--as24ci-color-title, inherit);
}

.as24ci-description {
  font-size: var(--as24ci-font-size-text, 16px);
  line-height: 1.7;
  color: var(--as24ci-color-text, inherit);
}

.as24ci-description p {
  margin: 0 0 8px;
}

/* Topbar */
.as24ci-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.as24ci-topbar-price-main {
  font-size: 28px;
  font-weight: 800;
  color: var(--as24ci-color-accent, currentColor);
}

/* Location & year tags */
.as24ci-title-meta-location {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--as24ci-muted);
  font-size: 14px;
}

.as24ci-location-icon {
  margin-right: 4px;
}

.as24ci-tag {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--as24ci-primary-soft);
  font-size: 12px;
  color: var(--as24ci-color-text, currentColor);
}

/* Grid wrapper for hero area (gallery + facts) */
.as24ci-main-grid {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

/* Offer ID */
.as24ci-offer-id {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--as24ci-border);
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.as24ci-offer-id-label {
  color: var(--as24ci-muted);
}

.as24ci-offer-id-value {
  font-weight: 600;
  color: var(--as24ci-heading);
}

/* Generic facts/specs styles used by classic layout */
.as24ci-facts-table {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.as24ci-facts-table .as24ci-fact-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr);
  align-items: baseline;
  font-size: var(--as24ci-font-size-text, 14px);
  padding: 5px 0;
  border-bottom: 1px dashed var(--as24ci-border-soft);
}

.as24ci-facts-table .as24ci-fact-row:last-child {
  border-bottom: none;
}

.as24ci-facts-table dt {
  margin: 0;
  color: var(--as24ci-muted);
}

.as24ci-facts-table dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--as24ci-heading);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Specs grid used by classic layout */
.as24ci-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 22px;
}

.as24ci-spec-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1.1fr);
  column-gap: 6px;
  align-items: baseline;
  font-size: 15px;
  color: var(--as24ci-heading);
}

.as24ci-spec-icon {
  color: #16a34a;
  font-size: 14px;
}

.as24ci-spec-label {
  color: var(--as24ci-muted);
}

.as24ci-spec-value {
  font-weight: 600;
  color: var(--as24ci-heading);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Equipment grid */
.as24ci-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 18px;
}

.as24ci-feature-item {
  display: flex;
  align-items: center;
  font-size: var(--as24ci-font-size-text, 14px);
  color: var(--as24ci-heading);
}

.as24ci-feature-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #005a9c;
  margin-right: 8px;
}

/* Inspection / Warranty facts grid */
.as24ci-facts-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.as24ci-facts-grid .as24ci-fact-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr);
  gap: 8px;
  align-items: baseline;
  font-size: var(--as24ci-font-size-text, 14px);
}

.as24ci-facts-grid dt {
  margin: 0;
  color: var(--as24ci-muted);
}

.as24ci-facts-grid dd {
  margin: 0;
  font-weight: 600;
  color: var(--as24ci-heading);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Responsive */
@media (max-width: 1100px) {
  .as24ci-page-inner {
    width: min(1440px, calc(100% - 32px));
  }
}

@media (max-width: 960px) {
  .as24ci-page-inner {
    width: calc(100% - 24px);
  }

  .as24ci-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .as24ci-title-main {
    font-size: 26px;
  }
}

@media (max-width: 780px) {
  .as24ci-specs-grid,
  .as24ci-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .as24ci-card {
    padding: 16px 18px;
  }

  .as24ci-specs-grid,
  .as24ci-features-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
 * Design tokens (global)
 * ============================================================ */

:root {
  /* Colors */
  --as24ci-color-primary: #2271b1;
  --as24ci-color-primary-hover: #135e96;
  --as24ci-color-primary-border: #1e5f92;
  --as24ci-color-text: #222222;
  --as24ci-color-heading: #2271b1;
  --as24ci-color-bg: #ffffff;
  --as24ci-color-bg-soft: #f9fafb;
  --as24ci-color-border: #e5e7eb;

  /* Radius (consistent) */
  --as24ci-radius: 10px;

  /* Shadows */
  --as24ci-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.08);
  --as24ci-shadow-card-soft: 0 8px 24px rgba(15, 23, 42, 0.06);
  --as24ci-shadow-button: 0 3px 8px rgba(15, 23, 42, 0.2);
  --as24ci-shadow-button-hover: 0 4px 12px rgba(15, 23, 42, 0.25);

  /* Borders */
  --as24ci-border: 1px solid var(--as24ci-color-border);

  /* Typography */
  --as24ci-font-size-body: 14px;

  /* Gallery */
  --as24ci-gallery-aspect: 16 / 9;

  /* Typography – inherit from active theme by default */
  --as24ci-font-family: inherit;
  --as24ci-font-size-base: inherit;

  /* Button standard */
  --as24ci-btn-font-size: 14px;
  --as24ci-btn-font-weight: 600;
  --as24ci-btn-padding-y: 10px;
  --as24ci-btn-padding-x: 20px;

  /* Anchor / sticky header safety */
  --as24ci-scroll-offset: 96px;

  /* Theme variables (keep compatibility) */
  --as24ci-border-soft: var(--as24ci-color-border);

  /* Status colors used in some notices */
  --as24ci-ok-soft: #e0f7ec;
  --as24ci-bad-soft: #fee2e2;

  /* Price color (defaults to accent; override via Design & Styles) */
  --as24ci-color-price: var(--as24ci-color-accent, currentColor);

  /* Muted / secondary text */
  --as24ci-color-muted: #6b7280;

  /* Design & Styles overrides – theme-first fallbacks */
  --as24ci-font-weight-title: inherit;
  --as24ci-border-radius: var(--as24ci-radius);
}

/* ============================================================
 * Global typography colors
 * ============================================================ */

/* All headings H1–H6 should respect the configured title color */
.as24ci-page-classic h1,
.as24ci-page-classic h2,
.as24ci-page-classic h3,
.as24ci-page-classic h4,
.as24ci-page-classic h5,
.as24ci-page-classic h6 {
  color: var(--as24ci-color-title, inherit);
}

/* All normal text inside the classic page should inherit theme color by default */
.as24ci-page-classic {
  color: var(--as24ci-color-text, inherit);
}

/*
 * Theme-bleed fix: some themes target bare HTML elements (p, span, label, div)
 * with direct color rules that break CSS inheritance.  Explicitly re-apply the
 * plugin text-color variable on the specific nodes that were reported as
 * ignoring the setting.
 */
.as24ci-page .as24ci-description p,
.as24ci-page span.as24ci-feature-label,
.as24ci-page .as24ci-test-drive-toggle-label,
.as24ci-page .as24ci-contact-privacy-label,
.as24ci-page .as24ci-financing__summary,
.as24ci-page .as24ci-contact-field label,
.as24ci-page .as24ci-spec-label,
.as24ci-page .as24ci-fact-row dt,
.as24ci-page .as24ci-fact-row dd {
  color: var(--as24ci-color-text, inherit);
}

/* ============================================================
 * Breadcrumbs (single top-left)
 * ============================================================ */

.as24ci-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
  padding: 0;
  font-size: 14px !important;
  line-height: 1.3;
  color: var(--as24ci-color-text, inherit);
  text-transform: uppercase;
}

.as24ci-breadcrumbs__link {
  color: var(--as24ci-color-link, var(--as24ci-color-primary));
  text-decoration: none;
  font-size: 14px !important;
}

.as24ci-breadcrumbs__link:hover,
.as24ci-breadcrumbs__link:focus {
  text-decoration: underline;
  font-size: 14px !important;
}

/* Breadcrumb separator: decorative chevron, marked aria-hidden in templates.
 * Uses a deep slate (#4b5563 ≈ 7.6:1 on #fff) to comfortably pass WCAG 2.2
 * AA and AAA on the light backgrounds the plugin uses for breadcrumbs.
 * Previous value (#9ca3af) measured only 2.3:1 in live WAVE scans. */
.as24ci-breadcrumbs__sep {
  color: #4b5563;
  font-size: 14px !important;
}

/* ============================================================
 * Layout: left content column + right sticky sidebar
 * ============================================================ */

.as24ci-layout-wide {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(320px, 1.1fr);
  gap: 20px;
}

.as24ci-layout-left {
  display: flex;
  flex-direction: column;
}

.as24ci-layout-left > .as24ci-card {
  margin-bottom: 18px;
}

.as24ci-card-gallery {
  order: 1;
}

.as24ci-card-description {
  order: var(--as24ci-order-desc, 2);
  display: var(--as24ci-display-desc, block);
}

.as24ci-card-specs {
  order: 3;
}

.as24ci-card-energy {
  order: 4;
}

.as24ci-card-features {
  order: 5;
}

.as24ci-card-mfk-warranty {
  order: 6;
}

/* When the Layout Manager is active the PHP controls DOM order; strip all
   hardcoded flex-order values so the browser respects the rendered sequence. */
.as24ci-lm-active > .as24ci-card-gallery,
.as24ci-lm-active > .as24ci-card-description,
.as24ci-lm-active > .as24ci-card-specs,
.as24ci-lm-active > .as24ci-card-energy,
.as24ci-lm-active > .as24ci-card-features,
.as24ci-lm-active > .as24ci-card-mfk-warranty {
  order: unset;
}

.as24ci-layout-right {
  position: sticky;
  top: 24px;
  align-self: flex-start;
}

/* ============================================================
 * Buttons (unified)
 * ============================================================ */

/* Base button class (preferred) */
.as24ci-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: var(--as24ci-btn-font-size, 14px);
  font-weight: var(--as24ci-btn-font-weight);
  line-height: 1;

  padding: var(--as24ci-btn-padding, var(--as24ci-btn-padding-y, 10px) var(--as24ci-btn-padding-x, 20px));
  border-radius: var(--as24ci-border-radius, var(--as24ci-radius));

  background: var(--as24ci-color-primary);
  color: #ffffff;
  border: 1px solid var(--as24ci-color-primary-border);

  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--as24ci-shadow-button);

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

.as24ci-btn:hover,
.as24ci-btn:focus {
  background: var(--as24ci-color-primary-hover);
  border-color: #0f4b78;
  box-shadow: var(--as24ci-shadow-button-hover);
  text-decoration: none;
}

.as24ci-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}

/* Normalize all existing buttons to the same sizing */
.as24ci-contact-submit,
.as24ci-hero-cta-button,
.as24ci-related-more-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--as24ci-btn-font-size, 14px);
  font-weight: var(--as24ci-btn-font-weight);
  line-height: 1;
  padding: var(--as24ci-btn-padding, 15px);
  border-radius: var(--as24ci-border-radius, var(--as24ci-radius));
  background: var(--as24ci-color-primary);
  color: #ffffff;
  border: 1px solid var(--as24ci-color-primary-border);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--as24ci-shadow-button);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

.as24ci-contact-submit:hover,
.as24ci-contact-submit:focus,
.as24ci-hero-cta-button:hover,
.as24ci-hero-cta-button:focus,
.as24ci-related-more-search-btn:hover,
.as24ci-related-more-search-btn:focus {
  background: var(--as24ci-color-primary-hover);
  border-color: #0f4b78;
  box-shadow: var(--as24ci-shadow-button-hover);
  text-decoration: none;
}

.as24ci-contact-submit:active,
.as24ci-hero-cta-button:active,
.as24ci-related-more-search-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}

/* Keep CTA width constraints */
.as24ci-hero-cta-button {
  width: 90%;
}

/* "Show more" toggles — styled as text links, not solid buttons.
 * Underline is intentional: task spec requests native text-link appearance.
 * font-size is forced to a safe pixel fallback to prevent theme inheritance of
 * massive heading sizes (e.g. Twenty Twenty-Five base font ≥ 22px). */
.as24ci-features-more-btn,
.as24ci-specs-more-btn {
  display: inline;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--as24ci-font-size-text, 16px);
  font-weight: inherit;
  line-height: 1.5;
  /* Priority: admin "Link color" → plugin primary → active theme */
  color: var(--as24ci-color-link, var(--as24ci-color-primary, inherit));
  cursor: pointer;
  text-decoration: underline;
  box-shadow: none;
  border-radius: 0;
  transition: none;
}

.as24ci-features-more-btn:hover,
.as24ci-features-more-btn:focus,
.as24ci-specs-more-btn:hover,
.as24ci-specs-more-btn:focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  text-decoration: underline;
}

.as24ci-features-more-wrap,
.as24ci-specs-more-wrap {
  margin-top: 12px;
  text-align: left;
}

/* ============================================================
 * Gallery
 * ============================================================ */

.as24ci-card-gallery {
  padding: 18px;
}

.as24ci-gallery-main-wrapper {
  position: relative;
  border-radius: var(--as24ci-radius);
  overflow: hidden;
  background: #000;
  margin-bottom: 14px;
  max-height: 600px;
}

.as24ci-gallery-main-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  cursor: zoom-in;
}

.as24ci-gallery-counter {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--as24ci-radius);
  background: #fff;
  color: var(--as24ci-color-text);
  font-size: var(--as24ci-font-size-text, 14px);
}

.as24ci-gallery-counter-icon {
  font-size: 14px;
}

.as24ci-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 23, 42, 0.45);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.as24ci-gallery-nav::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  flex-shrink: 0;
}

.as24ci-gallery-nav-prev {
  left: 20px;
}

.as24ci-gallery-nav-prev::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.as24ci-gallery-nav-next {
  right: 20px;
}

.as24ci-gallery-nav-next::before {
  transform: rotate(45deg);
  margin-right: 3px;
}

.as24ci-gallery-nav:hover {
  background: rgba(15, 23, 42, 0.7);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
  transform: translateY(-50%) scale(1.06);
}

.as24ci-gallery-nav:focus {
  background: rgba(15, 23, 42, 0.7);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
}

.as24ci-gallery-nav:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.as24ci-gallery-nav:active {
  transform: translateY(-50%) scale(0.96);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.3);
}

.as24ci-gallery-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Thumbnail strip wrapper with overflow controls */
.as24ci-gallery-thumbs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

.as24ci-thumbs-nav {
  flex: 0 0 auto;
  width: 32px;
  height: 64px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.55);
  color: #ffffff;
  border-radius: var(--as24ci-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.as24ci-thumbs-nav[hidden] {
  display: none;
}

.as24ci-thumbs-nav::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
}

.as24ci-thumbs-nav-prev {
  margin-right: 6px;
}

.as24ci-thumbs-nav-prev::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.as24ci-thumbs-nav-next {
  margin-left: 6px;
}

.as24ci-thumbs-nav-next::before {
  transform: rotate(45deg);
  margin-right: 3px;
}

.as24ci-thumbs-nav:hover {
  background: rgba(15, 23, 42, 0.8);
}

.as24ci-thumbs-nav:focus-visible {
  outline: 3px solid var(--as24ci-color-primary, #004b8d);
  outline-offset: 2px;
}

.as24ci-thumbs-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.as24ci-gallery-thumbs-wrap .as24ci-gallery-thumbs-strip {
  flex: 1 1 auto;
  min-width: 0;
}

.as24ci-gallery-thumbs-strip {
  display: flex;
  flex-direction: row;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  padding: 2px 2px 2px;
}

.as24ci-gallery-thumbs-strip::-webkit-scrollbar {
  height: 6px;
}
.as24ci-gallery-thumbs-strip::-webkit-scrollbar-track {
  background: transparent;
}
.as24ci-gallery-thumbs-strip::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.6);
  border-radius: 3px;
}

.as24ci-gallery-thumb-btn {
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  /* Allow focus-visible outline to surround the thumbnail image. */
  border-radius: var(--as24ci-radius);
}

.as24ci-gallery-thumb-btn:focus {
  outline: none;
}

.as24ci-gallery-thumb-btn:focus-visible {
  /* Visible keyboard focus indicator (WCAG 2.4.7 / 2.4.11). */
  outline: 3px solid var(--as24ci-color-primary, #004b8d);
  outline-offset: 3px;
}

.as24ci-gallery-thumb-image {
  width: 150px;
  height: 100px;
  border-radius: var(--as24ci-radius);
  border: 2px solid transparent;
  object-fit: cover;
  display: block;
  filter: grayscale(0.2);
  opacity: 0.7;
  transition:
    border-color 0.15s ease,
    opacity 0.15s ease,
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.as24ci-gallery-thumb-btn:hover .as24ci-gallery-thumb-image {
  opacity: 0.9;
  filter: grayscale(0);
}

.as24ci-gallery-thumb-btn-active .as24ci-gallery-thumb-image,
.as24ci-gallery-thumb-image.as24ci-gallery-thumb-active {
  border-color: var(--as24ci-color-primary);
  opacity: 1;
  filter: grayscale(0);
  box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.5);
  transform: translateY(-2px);
}

/* ============================================================
 * Sidebar (right column)
 * ============================================================ */

.as24ci-layout-right.as24ci-card {
  border-radius: var(--as24ci-radius);
  padding: 18px 18px 20px;
  background: var(--as24ci-color-bg);
  box-shadow: var(--as24ci-shadow-card);
  border: var(--as24ci-border);
}

.as24ci-title-main-hero {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.25;
}

.as24ci-title-meta-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.as24ci-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #e5f0ff;
  color: #004b8d;
  font-weight: 600;
}

.as24ci-hero-teaser {
  margin: 4px 0 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--as24ci-color-text);
}

/* ============================================================
 * Hero Price – neuer Stil
 * ============================================================ */

.as24ci-hero-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 12px 0 4px;
  padding-top: 8px;
  border-top: var(--as24ci-border);
}

.as24ci-hero-price-label {
    font-size: 26px;
    font-weight: 700;
    /* text-transform: uppercase; */
    color: var(--as24ci-color-price, currentColor);
}

.as24ci-hero-price-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--as24ci-color-price, currentColor);
}

/* Zweite Zeile: Listing price */
.as24ci-hero-listprice-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: var(--as24ci-border);
}

.as24ci-hero-listprice-label {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.as24ci-hero-listprice-value {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

/* Falls vorhanden, Savings-Badge neutralisieren oder ausblenden */
.as24ci-hero-savings-badge {
  display: none;
}

/* Optional: Badge für Ersparnis */
.as24ci-hero-savings-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ============================================================
 * Hero key data (Make, Model, …) – „Label über Wert“, 2‑spaltig
 * ============================================================ */

.as24ci-hero-keydata {
  margin: 10px 0 8px;
  padding-top: 6px;
}

.as24ci-hero-keydata-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 Spalten mit Einträgen */
  column-gap: 24px;
  row-gap: 0;
}

.as24ci-hero-keydata-row {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px dashed var(--as24ci-color-border);
}

.as24ci-hero-keydata-label {
  font-size: 14px;
  color: var(--as24ci-color-muted, currentColor);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.as24ci-hero-keydata-value {
  margin-top: 2px;
  color: var(--as24ci-color-text);
  font-size: 16px;
  font-weight: 600;
  word-break: break-word;
}

/* letzte zwei (unten rechts/links) ohne Border, optional */
.as24ci-hero-keydata-row:nth-last-child(-n + 2) {
  border-bottom: none;
}

/* ============================================================
 * Description (left column)
 * ============================================================ */

.as24ci-description {
  color: var(--as24ci-color-text, inherit);
  font-size: var(--as24ci-font-size-text, var(--as24ci-font-size-body));
  line-height: 1.6;
}

/* ============================================================
 * Technical data – 2-column cards, 16px values
 * ============================================================ */

.as24ci-card-specs {
  border-radius: var(--as24ci-radius);
  padding: 18px 22px 20px;
  background: var(--as24ci-color-bg);
  box-shadow: var(--as24ci-shadow-card-soft);
  border: var(--as24ci-border);
  font-size: 16px;
}

.as24ci-card-specs .as24ci-card-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.as24ci-equip-subtitle {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.as24ci-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  padding: 2px 0 10px;
}

.as24ci-spec-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 15px;
  border-radius: var(--as24ci-radius);
  background: var(--as24ci-color-bg-soft);
  min-height: 60px;
}

.as24ci-spec-icon {
  display: none;
}

.as24ci-spec-label {
  font-size: var(--as24ci-font-size-text, 14px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--as24ci-color-muted, currentColor);
  margin-bottom: 4px;
}

.as24ci-spec-value {
  color: var(--as24ci-color-text);
  font-size: 16px;
  font-weight: 600;
  word-break: break-word;
}

/* ============================================================
 * Inspection & warranty card
 * ============================================================ */

.as24ci-card-mfk-warranty {
  border-radius: var(--as24ci-radius);
  padding: 18px 22px 20px;
  background: var(--as24ci-color-bg);
  box-shadow: var(--as24ci-shadow-card-soft);
  border: var(--as24ci-border);
}

.as24ci-card-mfk-warranty .as24ci-card-title {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.as24ci-card-mfk-warranty .as24ci-card-title-margin-top {
  margin-top: 24px;
}

.as24ci-facts-grid {
  margin: 0;
  padding: 0 0 8px;
}

.as24ci-fact-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  font-size: var(--as24ci-font-size-text, 14px);
  color: var(--as24ci-color-text);
}

.as24ci-fact-row + .as24ci-fact-row {
  border-top: 1px dashed var(--as24ci-color-border);
}

.as24ci-fact-row dt {
  margin: 0;
  color: var(--as24ci-color-text);
}

.as24ci-fact-row dd {
  margin: 0;
  color: var(--as24ci-color-text);
  line-height: 1.4;
  font-weight: 400;
}

/* ============================================================
 * Contact / test-drive form (left column)
 * ============================================================ */

.as24ci-card-title-margin-top {
  margin-top: 18px;
}

/* Wrapper for contact section (form + seller) */
/* The contact section reuses ".as24ci-card" only as a layout slot: the visible
   card is ".as24ci-contact-layout" (it carries the border/shadow/background).
   The wrapper itself must stay padding-free so the inner card aligns to the
   same outer width as every other stacked card. The compound selector keeps a
   higher specificity than the mobile ".as24ci-card { padding }" overrides
   (≤560px, ≤480px, ≤390px), which would otherwise re-add padding and make the
   contact card narrower than its siblings. */
.as24ci-card.as24ci-card-contact-wrapper {
  margin-top: 18px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Two-column layout: 2/3 form, 1/3 seller */
.as24ci-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 18px;
  background: var(--as24ci-color-bg);
  box-shadow: var(--as24ci-shadow-card-soft);
  border-radius: var(--as24ci-radius);
  border: var(--as24ci-border);
  align-items: center;
}

.as24ci-contact-col-form,
.as24ci-contact-col-seller {
  min-width: 0;
  padding: 18px;
}

.as24ci-card-contact {
  background: var(--as24ci-color-bg-soft, inherit);
  border-radius: var(--as24ci-radius);
  padding: 18px 18px 20px;
}

.as24ci-contact-title-main {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--as24ci-color-primary);
}

.as24ci-contact-title-vehicle {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 800;
  color: var(--as24ci-color-primary);
}

.as24ci-contact-form {
  margin-top: 4px;
}

.as24ci-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1.1fr));
  gap: 10px 18px;
}

.as24ci-contact-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--as24ci-font-size-text, 14px);
  color: var(--as24ci-color-text);
}

.as24ci-contact-field-full {
  grid-column: 1 / -1;
}

.as24ci-contact-field label {
  font-weight: inherit;
  color: var(--as24ci-color-text, inherit);
  font-size: inherit;
}

.as24ci-contact-field input,
.as24ci-contact-field textarea {
  border-radius: var(--as24ci-radius);
  border: 1px solid var(--as24ci-border-soft);
  padding: 10px 12px;
  font-size: var(--as24ci-font-size-text, 14px);
  font-family: inherit;
  color: var(--as24ci-color-text);
  background: var(--as24ci-color-bg);
}

.as24ci-contact-field input:focus,
.as24ci-contact-field textarea:focus {
  border-color: var(--as24ci-color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
}

.as24ci-contact-privacy {
  margin-top: 14px;
}

.as24ci-contact-privacy-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--as24ci-font-size-text, 16px);
  line-height: 1.5;
}

.as24ci-contact-privacy-label span,
.as24ci-contact-privacy-label a {
  font-size: var(--as24ci-font-size-text, 16px);
}

.as24ci-contact-privacy-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
  margin: 3px 3px 3px 4px;
  padding: 0;
}

.as24ci-contact-actions {
  margin-top: 16px;
  text-align: right;
}

.as24ci-contact-notice {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: var(--as24ci-radius);
  font-size: var(--as24ci-font-size-text, 14px);
  color: var(--as24ci-color-text);
}

.as24ci-contact-notice-success {
  background: var(--as24ci-ok-soft);
  color: var(--as24ci-color-text);
  border: 1px solid #8dd9a1;
}

.as24ci-contact-notice-error {
  background: var(--as24ci-bad-soft);
  color: var(--as24ci-color-text);
  border: 1px solid #fca5a5;
}

/* Test Drive toggle & fields */
.as24ci-test-drive-toggle {
  margin-top: 14px;
}

.as24ci-test-drive-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--as24ci-font-size-text, 14px);
  color: var(--as24ci-color-primary);
  cursor: pointer;
}

.as24ci-test-drive-toggle-label input[type="checkbox"] {
  accent-color: var(--as24ci-color-primary);
  width: 16px;
  height: 16px;
}

.as24ci-test-drive-fields {
  margin-top: 12px;
  padding: 14px;
  background: var(--as24ci-color-bg-soft, #f9fafb);
  border-radius: var(--as24ci-radius);
  border: 1px solid var(--as24ci-border-soft);
}

.as24ci-test-drive-fields .as24ci-contact-grid {
  grid-template-columns: 1fr 1fr;
}

.as24ci-test-drive-fields select {
  border-radius: var(--as24ci-radius);
  border: 1px solid var(--as24ci-border-soft);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--as24ci-color-text);
  background: var(--as24ci-color-bg);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.as24ci-test-drive-fields select:focus {
  border-color: var(--as24ci-color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
}

.as24ci-test-drive-fields select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.as24ci-contact-submit-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Seller card */
.as24ci-seller-card {
  border-radius: var(--as24ci-radius);
  background: var(--as24ci-color-bg);
  border: var(--as24ci-border);
  box-shadow: var(--as24ci-shadow-card-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header: name, job, address + avatar */
.as24ci-seller-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: var(--as24ci-border);
}

.as24ci-seller-card-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.as24ci-seller-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--as24ci-color-text, currentColor);
}

.as24ci-seller-job {
  font-size: 16px;
  font-weight: 600;
  color: var(--as24ci-color-primary);
}

.as24ci-seller-address {
  margin-top: 4px;
  font-size: 16px;
  color: var(--as24ci-color-muted, currentColor);
}

.as24ci-seller-avatar {
  margin-left: 12px;
}

.as24ci-seller-avatar-img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--as24ci-color-bg-soft);
}

/* Body: email + phone */
.as24ci-seller-card-body {
  padding: 12px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.as24ci-seller-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.as24ci-seller-row-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--as24ci-color-muted, currentColor);
  margin: 0;
  white-space: nowrap;
}

.as24ci-seller-row-value {
  font-size: 16px;
  color: var(--as24ci-color-text, currentColor);
  text-decoration: none;
  word-break: break-all;
}

.as24ci-seller-row-value:hover,
.as24ci-seller-row-value:focus {
  color: var(--as24ci-color-primary-hover);
  text-decoration: underline;
}

/* Font Awesome icons */
.as24ci-seller-icon {
  font-size: 16px;
  color: var(--as24ci-color-primary);
}

/* Social profile icons: horizontal row */
.as24ci-seller-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  align-items: center;
}

.as24ci-seller-social-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0f2f5;
  color: #4b5563;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}

.as24ci-seller-social-icon-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.as24ci-seller-social-icon-link:hover,
.as24ci-seller-social-icon-link:focus {
  color: #fff;
  transform: translateY(-2px);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.as24ci-seller-social-icon-link:hover svg,
.as24ci-seller-social-icon-link:hover svg path,
.as24ci-seller-social-icon-link:focus svg,
.as24ci-seller-social-icon-link:focus svg path {
  fill: #ffffff !important;
}

.as24ci-seller-social-icon-link:focus-visible {
  outline: 2px solid var(--as24ci-color-primary);
}

.as24ci-seller-social-icon-link--facebook:hover,
.as24ci-seller-social-icon-link--facebook:focus { background: #1877F2; }

.as24ci-seller-social-icon-link--instagram:hover,
.as24ci-seller-social-icon-link--instagram:focus { background: #d6249f; }

.as24ci-seller-social-icon-link--x:hover,
.as24ci-seller-social-icon-link--x:focus { background: #000; }

.as24ci-seller-social-icon-link--linkedin:hover,
.as24ci-seller-social-icon-link--linkedin:focus { background: #0A66C2; }

/* ============================================================
 * Sidebar CTA button
 * ============================================================ */

.as24ci-hero-cta {
  margin-top: 18px;
  text-align: center;
}

/* ============================================================
 * Lightbox
 * ============================================================ */

.as24ci-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.88);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.as24ci-lightbox-inner {
  position: relative;
  /* Use almost the full viewport so the unified gallery module can really
     breathe on desktop without ever forcing horizontal page scroll. */
  width: 100%;
  max-width: 96vw;
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* The unified gallery module: on desktop it is a single horizontal card
   holding the image (left) and the vehicle information sidebar (right).
   On mobile/tablet portrait it collapses into a column that just holds
   the image (the sidebar stays hidden). */
.as24ci-lightbox-module {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 92vw;
}

.as24ci-lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
}

.as24ci-lightbox-image {
  display: block;
  width: auto;
  height: auto;
  /* Allow the lightbox image to dominate the viewport on desktop while
     leaving room for the counter and thumbnail strip stacked below. */
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--as24ci-radius);
}

.as24ci-lightbox-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: var(--as24ci-color-text);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.5);
  z-index: 5;
}

.as24ci-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(15, 23, 42, 0.7);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 24px;
  z-index: 4;
}

.as24ci-lightbox-nav:hover {
  background: rgba(15, 23, 42, 0.88);
}

.as24ci-lightbox-nav:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

/* On mobile / narrow viewports the arrows sit just inside the image edges
   so they don't get clipped by the overlay padding. */
.as24ci-lightbox-nav-prev {
  left: 8px;
}

.as24ci-lightbox-nav-next {
  right: 8px;
}

.as24ci-lightbox-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--as24ci-radius);
  background: rgba(15, 23, 42, 0.6);
  color: #ffffff;
  font-size: var(--as24ci-font-size-text, 14px);
}

.as24ci-lightbox-thumbs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 92vw;
}

.as24ci-lightbox-thumbs-strip {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: thin;
}

.as24ci-lightbox-thumbs-strip::-webkit-scrollbar {
  height: 6px;
}
.as24ci-lightbox-thumbs-strip::-webkit-scrollbar-track {
  background: transparent;
}
.as24ci-lightbox-thumbs-strip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
}

.as24ci-lightbox-thumb-btn {
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid transparent;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.65;
  transition:
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.as24ci-lightbox-thumb-btn:hover {
  opacity: 0.95;
}

.as24ci-lightbox-thumb-btn.is-active {
  border-color: #ffffff;
  opacity: 1;
}

.as24ci-lightbox-thumb-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.as24ci-lightbox-thumb-image {
  display: block;
  width: 80px;
  height: 54px;
  object-fit: cover;
  border-radius: 2px;
}

.as24ci-lightbox-thumbs-nav {
  flex: 0 0 auto;
  width: 28px;
  height: 54px;
  margin: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 23, 42, 0.55);
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.as24ci-lightbox-thumbs-nav[hidden] {
  display: none;
}

.as24ci-lightbox-thumbs-nav::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
}

.as24ci-lightbox-thumbs-nav-prev::before {
  transform: rotate(-135deg);
  margin-left: 2px;
}

.as24ci-lightbox-thumbs-nav-next::before {
  transform: rotate(45deg);
  margin-right: 2px;
}

.as24ci-lightbox-thumbs-nav:hover {
  background: rgba(15, 23, 42, 0.8);
}

.as24ci-lightbox-thumbs-nav:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.as24ci-lightbox-thumbs-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ============================================================
 * Lightbox – desktop vehicle information sidebar
 * ------------------------------------------------------------
 * The sidebar is rendered once in the page (via a hidden
 * <template>) and injected into the lightbox by the gallery JS.
 * It is hidden on mobile / narrow viewports and only shown on
 * sufficiently wide screens (≥ 1024px) where there is enough
 * horizontal room to keep the image large and to attach the
 * sidebar to its right edge as one unified gallery module.
 * ============================================================ */

/* Hide the sidebar by default (mobile-first) – it only appears
   on desktop via the media query below. */
.as24ci-lightbox-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  /* Sidebar width drives both the sidebar itself and the image's
     reserved space, so the two stay in sync across breakpoints. */
  .as24ci-lightbox-inner.has-sidebar {
    --as24ci-lb-sidebar: 320px;
  }

  /* Promote the unified gallery module to a horizontal card.
     The image (stage) and the sidebar are direct flex children
     and sit flush against each other with no visible seam.
     The module is sized to its contents (image + sidebar) and
     centered horizontally so the pair reads as one balanced unit
     in the middle of the viewport instead of stretching edge to
     edge and looking left-heavy. */
  .as24ci-lightbox-inner.has-sidebar .as24ci-lightbox-module {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    width: auto;
    max-width: 94vw;
    margin-left: auto;
    margin-right: auto;
    /* A subtle drop shadow ties the image and sidebar together
       as one premium gallery card. */
    filter: drop-shadow(0 10px 28px rgba(15, 23, 42, 0.45));
  }

  .as24ci-lightbox-inner.has-sidebar .as24ci-lightbox-stage {
    /* Shrink the stage to the image so the dark panel hugs the
       image exactly and the sidebar attaches directly to the
       image's right edge with no empty gap between them. */
    flex: 0 1 auto;
    min-width: 0;
    background: #0b1220;
    border-top-left-radius: var(--as24ci-radius);
    border-bottom-left-radius: var(--as24ci-radius);
    overflow: hidden;
  }

  .as24ci-lightbox-inner.has-sidebar .as24ci-lightbox-image {
    /* Keep the image large and dominant while reserving room for
       the sidebar and for the viewport-edge navigation arrows so
       the combined module never overflows the viewport. The stage
       paints the rounded left corners, so the image itself no
       longer needs its own radius and seam. */
    max-width: calc(94vw - var(--as24ci-lb-sidebar) - 132px);
    max-height: 82vh;
    border-radius: 0;
  }

  .as24ci-lightbox-inner.has-sidebar .as24ci-lightbox-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--as24ci-lb-sidebar);
    width: var(--as24ci-lb-sidebar);
    max-width: var(--as24ci-lb-sidebar);
    /* Match the image height: align-items: stretch on the module
       stretches the sidebar to the same height as the image
       (which defines the cross axis). */
    align-self: stretch;
    max-height: 82vh;
    overflow-y: auto;
    padding: 24px 24px 20px;
    background: #ffffff;
    color: var(--as24ci-color-text);
    border-top-right-radius: var(--as24ci-radius);
    border-bottom-right-radius: var(--as24ci-radius);
    border: 1px solid rgba(15, 23, 42, 0.08);
    /* No left border: the sidebar sits flush against the image so
       the pair reads as one connected card (no inner seam line). */
    border-left: none;
    box-shadow: none;
    font-size: var(--as24ci-font-size-text, 14px);
    line-height: 1.45;
  }

  /* Push the large prev / next arrows out to the viewport sides,
     clear of the centered module and of the seam between image
     and sidebar, so they read as viewport navigation controls. */
  .as24ci-lightbox-inner.has-sidebar .as24ci-lightbox-nav-prev {
    left: -66px;
  }

  .as24ci-lightbox-inner.has-sidebar .as24ci-lightbox-nav-next {
    right: -66px;
  }
}

@media (min-width: 1280px) {
  .as24ci-lightbox-inner.has-sidebar {
    --as24ci-lb-sidebar: 360px;
  }
}

@media (min-width: 1600px) {
  .as24ci-lightbox-inner.has-sidebar {
    --as24ci-lb-sidebar: 380px;
  }
}

.as24ci-lightbox-sidebar-title {
  margin: 0 0 16px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--as24ci-color-text);
  letter-spacing: -0.01em;
}

.as24ci-lightbox-sidebar-price-row,
.as24ci-lightbox-sidebar-listprice-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
}

.as24ci-lightbox-sidebar-price-row {
  padding: 12px 14px;
  margin: 0 0 6px;
  background: rgba(37, 99, 235, 0.06);
  border-radius: var(--as24ci-radius);
}

.as24ci-lightbox-sidebar-listprice-row {
  padding: 0 12px 4px;
}

.as24ci-lightbox-sidebar-price-label,
.as24ci-lightbox-sidebar-listprice-label {
  font-size: 0.85em;
  color: rgba(15, 23, 42, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.as24ci-lightbox-sidebar-price-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--as24ci-color-primary, #2563eb);
  line-height: 1.1;
}

.as24ci-lightbox-sidebar-listprice-value {
  text-decoration: line-through;
  color: rgba(15, 23, 42, 0.55);
  font-size: 0.9em;
}

.as24ci-lightbox-sidebar-specs {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 4px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.as24ci-lightbox-sidebar-spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.as24ci-lightbox-sidebar-spec:last-child {
  border-bottom: none;
}

.as24ci-lightbox-sidebar-spec-label {
  color: rgba(15, 23, 42, 0.6);
  font-size: 0.9em;
  font-weight: 500;
}

.as24ci-lightbox-sidebar-spec-value {
  font-weight: 600;
  color: var(--as24ci-color-text);
  text-align: right;
}

.as24ci-lightbox-sidebar-cta {
  margin-top: auto;
  padding-top: 16px;
  /* Keep the contact button visible at the bottom of the sidebar
     even when the spec list grows and the sidebar scrolls. */
  position: sticky;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 28%
  );
}

/* The in-lightbox contact CTA intentionally reuses the standard
 * `.as24ci-hero-cta` / `.as24ci-hero-cta-button` markup and classes from the
 * normal vehicle detail sidebar so that any customer custom CSS targeting the
 * vehicle contact button applies identically here. No lightbox-specific button
 * style is defined. */

/* ============================================================
 * Equipment – 1-column list
 * ============================================================ */

.as24ci-card-features .as24ci-equip-subtitle {
  margin: 40px 0 20px 0px;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.as24ci-features-grid {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-as24ci-equipment]:not(.is-expanded) .as24ci-features-grid {
  overflow: hidden;
  max-height: 120px; /* ~5 items at 14px/1.5 line-height + 2px margin ≈ 23px each */
}

[data-as24ci-equipment].is-expanded .as24ci-features-grid {
  max-height: none;
}

.as24ci-feature-item {
  display: flex;
  align-items: flex-start;
  font-size: var(--as24ci-font-size-text, 14px);
  line-height: 1.5;
  color: var(--as24ci-color-text);
  margin-bottom: 2px;
}

.as24ci-feature-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background-color: var(--as24ci-color-primary);
  margin-right: 8px;
  margin-top: 7px;
  flex-shrink: 0;
}

.as24ci-feature-label {
  display: block;
  word-break: break-word;
}

/* (as24ci-features-more-wrap base styles merged into the "Show more" toggles section above) */

/* ============================================================
 * Related cars – light, compact info
 * ============================================================ */

.as24ci-card-related {
  margin-top: 40px;
  padding-top: 4px;
  background: transparent;
  box-shadow: none;
  border: none;
}

.as24ci-card-related .as24ci-card-title {
  margin: 0 0 16px;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--as24ci-color-heading, currentColor);
}

.as24ci-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.as24ci-related-card {
  border-radius: var(--as24ci-radius);
  overflow: hidden;
  background: var(--as24ci-color-bg);
  color: var(--as24ci-color-text, inherit);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  border: var(--as24ci-border);
  transform: translateY(0);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.as24ci-related-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.as24ci-related-thumb {
  background: #f3f4f6;
}

.as24ci-related-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.as24ci-related-body {
  padding: 14px 16px 16px;
}

.as24ci-related-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--as24ci-color-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.as24ci-related-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--as24ci-color-price, currentColor);
  margin-bottom: 6px;
}

.as24ci-related-lines {
  margin-top: 2px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 2px;
}

.as24ci-related-line {
  font-size: 14px;
  line-height: 1.5;
  color: var(--as24ci-color-text, inherit);
}

/* Global "Show all vehicles" button block */
.as24ci-related-more-search {
  margin-top: 22px;
  text-align: right;
}

/* Card hover */
.as24ci-related-link:hover .as24ci-related-card,
.as24ci-related-link:focus .as24ci-related-card {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22);
  border-color: #d1d5db;
}

/* ============================================================
 * Anchor jump / sticky header safety (Contact section)
 * ============================================================ */

#as24ci-contact {
  scroll-margin-top: var(--as24ci-scroll-offset);
}

/* ============================================================
 * Responsive
 * ============================================================ */

@media (max-width: 1200px) {
  .as24ci-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .as24ci-layout-wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .as24ci-layout-right {
    position: static;
    top: auto;
  }

  .as24ci-layout-right.as24ci-card {
    box-shadow: none;
    border-radius: var(--as24ci-radius);
    padding: 14px 14px 16px;
  }

  .as24ci-title-main-hero {
    font-size: 22px;
  }

  .as24ci-hero-price-value {
    font-size: 22px;
  }

  .as24ci-gallery-thumb-image {
    width: 120px;
    height: 80px;
  }

  .as24ci-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .as24ci-contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .as24ci-contact-col-seller {
    order: -1;
  }

  .as24ci-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .as24ci-hero-price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
  }
}

@media (max-width: 640px) {
  .as24ci-gallery-thumb-image {
    width: 100px;
    height: 70px;
  }

  .as24ci-contact-grid {
    grid-template-columns: 1fr;
  }

  .as24ci-specs-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .as24ci-spec-item {
    padding: 8px 10px;
  }

  .as24ci-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .as24ci-related-thumb img {
    height: 180px;
  }

  .as24ci-hero-keydata-grid {
    /* Compact two-column key facts on mobile (label stacked over value).
       minmax(0,1fr) lets long values wrap instead of forcing one column. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .as24ci-hero-price-value {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .as24ci-related-lines {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
 * AS24CI: Mobile Sidebar-Duplikat (oben unter der Galerie)
 * ============================================================ */

/* Standard: Desktop-Sidebar sichtbar, Mobile-Sidebar versteckt */
.as24ci-sidebar-mobile {
  display: none;
}

.as24ci-sidebar-desktop {
  display: block;
}

/* Mobile: Desktop-Sidebar ausblenden, Mobile-Sidebar unter Galerie anzeigen */
@media (max-width: 960px) {
  .as24ci-sidebar-desktop {
    display: none;
  }

  .as24ci-sidebar-mobile {
    display: block;
    margin-top: 12px;
    margin-bottom: 18px;
  }

  /* Sticky auf Mobile deaktivieren, damit nichts überlappt */
  .as24ci-sidebar-mobile.as24ci-layout-right,
  .as24ci-sidebar-desktop.as24ci-layout-right {
    position: static;
    top: auto;
  }

  /* CTA im mobilen Sidebar vollbreit, bleibt im Card-Rand */
  .as24ci-sidebar-mobile .as24ci-hero-cta-button {
    width: 100%;
  }
}

/* ============================================================
 * Equipment & Related (kleine Duplikate/Feinschliff)
 * ============================================================ */

.as24ci-related-title {
  color: var(--as24ci-color-primary);
  font-weight: 700;
}
/* ============================================================
 * Inline SVG icons (.as24ci-icon)
 * ============================================================ */

.as24ci-icon {
  display: inline-flex;
  align-items: center;
}

.as24ci-icon svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  flex-shrink: 0;
}

/* ============================================================
 * PDF datasheet button
 * ============================================================ */

/* ============================================================
 * EnVKV Advanced Energy Block
 * ============================================================ */

.as24ci-energy-advanced {
  background: #ffffff;
  border-radius: var(--as24ci-border-radius, 12px);
  border: 1px solid var(--as24ci-border-soft);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  padding: 20px 22px;
  margin-bottom: 18px;
}

/* 2-column grid */
.as24ci-energy-grid {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 28px 36px;
  align-items: start;
}

/* When the energyLabel field is disabled in Layout Manager, Column 1 is
   not rendered. Let Column 2 expand to fill the full block width. */
.as24ci-energy-grid--no-label {
  grid-template-columns: 1fr;
}

/* ── Energy Label Scale (Column 1) ──────────────────────────── */

.as24ci-energy-scale {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 16px;
}

.as24ci-energy-scale-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Colored bar (contains the letter) */
.as24ci-energy-bar {
  display: flex;
  align-items: center;
  padding: 0 8px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  flex-shrink: 0;
}

/* Energy scale letter.
 * The scale wrapper carries role="img" + aria-label, so the letters are
 * decorative graphical objects from an AT perspective, but their color is
 * computed in PHP (see as24ci_pick_accessible_text_color() in
 * src/Core/Helpers.php) and emitted as an inline style on each
 * .as24ci-energy-scale-letter so every visible letter reaches at least
 * WCAG 2.2 AA 4.5:1 contrast against its own bar background.
 *
 * The rule below is only a safe fallback for the (unreachable) case where
 * the template did not set the inline color: a dark slate that passes AA
 * on every light bar (A+/A/B/C/D/E) and the AA graphic-object minimum on
 * the darker bars. The inline color emitted by the template always wins.
 */
.as24ci-energy-scale-letter {
  color: #111827;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* Progressive bar widths (A+ narrowest → G widest) */
.as24ci-energy-scale-row--aplus .as24ci-energy-bar { width: 3.3em; }
.as24ci-energy-scale-row--a     .as24ci-energy-bar { width: 4.1em; }
.as24ci-energy-scale-row--b     .as24ci-energy-bar { width: 5.1em; }
.as24ci-energy-scale-row--c     .as24ci-energy-bar { width: 6.1em; }
.as24ci-energy-scale-row--d     .as24ci-energy-bar { width: 7.1em; }
.as24ci-energy-scale-row--e     .as24ci-energy-bar { width: 8.1em; }
.as24ci-energy-scale-row--f     .as24ci-energy-bar { width: 9.1em; }
.as24ci-energy-scale-row--g     .as24ci-energy-bar { width: 10.1em; }

/* Bar colors */
.as24ci-energy-scale-row--aplus .as24ci-energy-bar { background-color: #009640; }
.as24ci-energy-scale-row--a     .as24ci-energy-bar { background-color: #52b74b; }
.as24ci-energy-scale-row--b     .as24ci-energy-bar { background-color: #95c74b; }
.as24ci-energy-scale-row--c     .as24ci-energy-bar { background-color: #cedb00; }
.as24ci-energy-scale-row--d     .as24ci-energy-bar { background-color: #f5d300; }
.as24ci-energy-scale-row--e     .as24ci-energy-bar { background-color: #f0a800; }
.as24ci-energy-scale-row--f     .as24ci-energy-bar { background-color: #e96500; }
.as24ci-energy-scale-row--g     .as24ci-energy-bar { background-color: #e3000f; }

/* Pointer (◀) next to the active bar */
.as24ci-energy-pointer {
  font-size: 13px;
  color: #1D2327;
  line-height: 1;
  flex-shrink: 0;
}

.as24ci-energy-pointer--hidden {
  visibility: hidden;
}

/* Highlight the active row */
.as24ci-energy-scale-row--active .as24ci-energy-bar {
  outline: 2px solid #1D2327;
  outline-offset: -1px;
}

/* ── Info list below the scale ───────────────────────────────── */

.as24ci-energy-info-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.as24ci-energy-info-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--as24ci-border-soft);
}

.as24ci-energy-info-row:last-child {
  border-bottom: none;
}

.as24ci-energy-info-row dt {
  margin: 0;
  color: var(--as24ci-muted);
  font-weight: 400;
}

.as24ci-energy-info-row dd {
  margin: 0;
  font-weight: 700;
  color: var(--as24ci-heading);
  text-align: right;
  white-space: nowrap;
}

/* ── Detailed consumption list (Column 2) ────────────────────── */

.as24ci-energy-detail-list {
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.as24ci-energy-detail-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--as24ci-border-soft);
}

.as24ci-energy-detail-row:last-child {
  border-bottom: none;
}

.as24ci-energy-detail-row dt {
  margin: 0;
  color: var(--as24ci-muted);
  font-weight: 400;
}

.as24ci-energy-detail-row dd {
  margin: 0;
  font-weight: 700;
  color: var(--as24ci-heading);
  text-align: right;
  white-space: nowrap;
}

/* ── CO2 costs section ───────────────────────────────────────── */

.as24ci-co2-costs {
  margin-top: 8px;
}

.as24ci-co2-costs-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--as24ci-heading);
}

.as24ci-co2-costs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.as24ci-co2-costs-table td {
  padding: 5px 0;
  border-bottom: 1px dashed var(--as24ci-border-soft);
  vertical-align: baseline;
  color: var(--as24ci-muted);
}

.as24ci-co2-costs-table tr:last-child td {
  border-bottom: none;
}

.as24ci-co2-costs-table .as24ci-co2-costs-value {
  text-align: right;
  font-weight: 700;
  color: var(--as24ci-heading);
  white-space: nowrap;
  padding-left: 12px;
}

/* ── WLTP legal disclaimer ───────────────────────────────────── */

.as24ci-energy-disclaimer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--as24ci-border-soft);
  font-size: 12px;
  line-height: 1.6;
  color: var(--as24ci-muted);
}

.as24ci-energy-disclaimer a {
  color: var(--as24ci-primary);
  text-decoration: underline;
}

.as24ci-energy-disclaimer a:hover {
  color: var(--as24ci-primary-hover);
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 720px) {
  .as24ci-energy-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .as24ci-energy-info-row,
  .as24ci-energy-detail-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .as24ci-energy-info-row dd,
  .as24ci-energy-detail-row dd {
    text-align: left;
  }
}

.as24ci-share-btn--pdf {
  background: #dc2626;
}

.as24ci-share-btn--pdf:hover {
  background: #b91c1c;
  opacity: 1;
}

.as24ci-share-placement--sticky-right .as24ci-share-btn--pdf svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ============================================================
 * Mobile responsive – single vehicle detail page
 * ============================================================ */

/* ── Narrow mobile (≤767px): gallery, inner width, hero ── */
@media (max-width: 767px) {
  /* Ensure inner wrapper doesn't create horizontal scroll */
  .as24ci-page {
    overflow-x: hidden;
  }

  /* Gallery: cap image height so it doesn't dominate the viewport */
  .as24ci-gallery-main-image {
    max-height: 260px;
  }

  .as24ci-gallery-main-wrapper {
    max-height: 260px;
  }

  /* Gallery nav arrows: smaller size and keep inside image on mobile */
  .as24ci-gallery-nav {
    width: 38px;
    height: 38px;
  }

  .as24ci-gallery-nav-prev {
    left: 10px;
  }

  .as24ci-gallery-nav-next {
    right: 10px;
  }

  /* Thumbnail strip: smaller thumbs */
  .as24ci-gallery-thumb-image {
    width: 90px;
    height: 62px;
  }

  /* Hero title */
  .as24ci-title-main-hero {
    font-size: 20px;
  }

  /* Hero price: stronger visual weight on mobile.
     The price row is already stacked (column) at this width, so the label
     reads as a small caption above a large, scannable value. */
  .as24ci-hero-price-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--as24ci-color-muted, var(--as24ci-muted));
  }

  .as24ci-hero-price-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
  }

  /* Contact layout: single column already at 960px; ensure padding fits */
  .as24ci-contact-col-form,
  .as24ci-contact-col-seller {
    padding: 14px;
  }

  /* Form fields: full width within their card, never wider than the card. */
  .as24ci-contact-field input,
  .as24ci-contact-field textarea,
  .as24ci-test-drive-fields select {
    width: 100%;
    max-width: 100%;
  }

  /* Buttons: keep every CTA/submit/link button inside its parent card. */
  .as24ci-hero-cta-button,
  .as24ci-contact-submit,
  .as24ci-related-more-search-btn {
    width: 100%;
    max-width: 100%;
  }

  .as24ci-contact-actions {
    text-align: center;
  }

  /* EnVKV / energy block: the inner ".as24ci-energy-advanced" is itself a
     white card. Nested inside the ".as24ci-card" wrapper it renders as a
     narrower box-in-a-box on mobile. Flatten it so its content aligns to the
     same mobile content width as every other card. */
  .as24ci-card-energy .as24ci-energy-advanced {
    padding: 0;
    margin-bottom: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  /* Seller name: reduce size to prevent overflow */
  .as24ci-seller-name {
    font-size: 18px;
  }

  /* Spec items: allow value text to wrap */
  .as24ci-spec-value {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Fact rows: allow values to wrap */
  .as24ci-fact-row dd {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* EnVKV: values may wrap on mobile */
  .as24ci-energy-detail-row dd,
  .as24ci-energy-info-row dd {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* CO2 cost table: allow label to wrap */
  .as24ci-co2-costs-table td:not(.as24ci-co2-costs-value) {
    word-break: break-word;
  }

  /* Related grid already 2 cols at 960px; stays fine */
}

/* ── Very narrow (≤480px): inner width, further size reductions ── */
@media (max-width: 480px) {
  .as24ci-page-inner {
    width: calc(100% - 16px);
  }

  .as24ci-card {
    padding: 14px 14px 16px;
  }

  .as24ci-gallery-main-image {
    max-height: 220px;
  }

  .as24ci-gallery-main-wrapper {
    max-height: 220px;
  }

  .as24ci-gallery-thumb-image {
    width: 74px;
    height: 52px;
  }

  /* Hero price row: stack label/value */
  .as24ci-hero-price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /* Hero price: keep prominent on very narrow screens. */
  .as24ci-hero-price-label {
    font-size: 14px;
  }

  .as24ci-hero-price-value {
    font-size: 28px;
  }

  /* CO2 cost table value: allow wrapping */
  .as24ci-co2-costs-table .as24ci-co2-costs-value {
    white-space: normal;
    word-break: break-word;
  }
}

/* ── Very narrow (≤390px): minimal padding, scale down further ── */
@media (max-width: 390px) {
  .as24ci-card {
    padding: 12px 12px 14px;
  }

  .as24ci-title-main-hero {
    font-size: 18px;
  }

  .as24ci-hero-price-label {
    font-size: 13px;
  }

  .as24ci-hero-price-value {
    font-size: 26px;
  }

  /* Spec items: reduce min-height so they compress on narrow screens */
  .as24ci-spec-item {
    min-height: auto;
    padding: 8px 10px;
  }

  /* Lightbox nav: keep inside the image on very narrow viewport */
  .as24ci-lightbox-nav-prev {
    left: 0;
  }

  .as24ci-lightbox-nav-next {
    right: 0;
  }

  /* Lightbox thumbnails: smaller on very narrow viewports */
  .as24ci-lightbox-thumb-image {
    width: 60px;
    height: 40px;
  }
}