/* ============================================================================
   @apps-broker/design-system - radar-market.css
   ----------------------------------------------------------------------------
   Product-app skin derived from Casa Radar. Import this file after each app's
   local stylesheet so these shared patterns win the cascade while app-specific
   layout and behavior remain local.
   ========================================================================== */

:root {
  --rm-canvas: var(--canvas, var(--color-bg));
  --rm-surface: var(--surface, var(--color-surface));
  --rm-surface-soft: var(--surface-soft, var(--color-surface-muted));
  --rm-surface-sunken: var(--surface-sunken, var(--color-bg-secondary));
  --rm-line: var(--line, var(--color-border));
  --rm-line-strong: var(--line-strong, color-mix(in srgb, var(--color-border) 72%, var(--color-text-secondary)));
  --rm-ink: var(--ink, var(--color-text));
  --rm-ink-soft: var(--ink-soft, var(--color-text-secondary));
  --rm-muted: var(--muted, var(--color-text-secondary));
  --rm-primary: var(--primary, var(--color-brand));
  --rm-primary-strong: var(--primary-strong, var(--color-brand-strong));
  --rm-primary-wash: var(--primary-wash, color-mix(in srgb, var(--color-brand) 12%, var(--color-surface)));
  --rm-on-primary: var(--on-primary, var(--radar-on-accent, #fff));
  --rm-warning: var(--warning, var(--color-accent));
  --rm-success: var(--success, oklch(0.55 0.11 160));
  --rm-danger: var(--danger, oklch(0.55 0.16 25));
  --rm-ring: var(--ring, color-mix(in srgb, var(--color-brand) 36%, transparent));
  --rm-radius-sm: var(--radius-sm, var(--vc-radius-sm));
  --rm-radius-md: var(--radius-md, var(--vc-radius));
  --rm-radius-lg: var(--radius-lg, calc(var(--vc-radius) + 4px));
  --rm-radius-pill: var(--radius-pill, 999px);
  --rm-control-height: 42px;
  --rm-control-radius: 10px;
  --rm-card-radius: 14px;
  --rm-panel-radius: 18px;
  --rm-shadow-xs: var(--shadow-xs, 0 1px 2px color-mix(in srgb, var(--vc-shadow-color) 24%, transparent));
  --rm-shadow-sm: var(--shadow-sm, 0 1px 3px color-mix(in srgb, var(--vc-shadow-color) 26%, transparent));
  --rm-shadow-md: var(--shadow-md, 0 8px 22px -12px var(--vc-shadow-color));
  --rm-shadow-lg: var(--shadow-lg, 0 20px 46px -18px var(--vc-shadow-color));
  --rm-dur: var(--dur, 180ms);
  --rm-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --rm-topbar-bg: color-mix(in oklch, var(--rm-surface) 88%, transparent);
  --rm-auth-fixed-reserve: 112px;
  --rm-card-bg: var(--rm-surface);
  --rm-media-bg: color-mix(in srgb, var(--radar-ambient, var(--rm-surface-soft)) 46%, var(--rm-surface));
}

body {
  color: var(--rm-ink);
  background: var(--rm-canvas);
  background: color-mix(in srgb, var(--radar-ambient, var(--rm-canvas)) 34%, var(--rm-canvas));
}

body :is(
  .shell,
  .auto-shell,
  .mobility-shell
) {
  display: grid;
  grid-template-columns: 308px minmax(0, 1fr);
  gap: var(--space-6, 24px);
  width: min(1340px, calc(100% - 2 * var(--space-6, 24px)));
  min-height: calc(100dvh - 2 * var(--space-6, 24px));
  margin: var(--space-6, 24px) auto var(--space-8, 32px);
  align-items: start;
  background: transparent;
}

body :is(.main, .auto-main, .mobility-main) {
  min-width: 0;
}

body :is(.content, .auto-content, .mobility-content) {
  display: grid;
  gap: var(--space-5, 20px);
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) {
  position: sticky;
  top: var(--space-6, 24px);
  max-height: calc(100dvh - 2 * var(--space-6, 24px));
  overflow: auto;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-panel-radius);
  padding: var(--space-5, 20px);
  color: var(--rm-ink);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-xs);
}

body :is(.sidebar-fields, .auto-sidebar__section, .mobility-sidebar__fields) {
  display: grid;
  gap: var(--space-3, 12px);
  min-width: 0;
}

body :is(
  .wordmark,
  .sidebar .brand,
  .auto-brand,
  .mobility-brand
) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
  color: var(--rm-ink);
  font-weight: 800;
}

body :is(
  .wordmark__mark,
  .sidebar .brand .dot,
  .auto-brand__dot,
  .mobility-brand__mark,
  .brandMark
) {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rm-radius-sm);
  color: var(--rm-on-primary);
  background: var(--rm-primary);
  box-shadow: var(--rm-shadow-xs);
}

body :is(
  svg.wordmark__mark,
  .sidebar .brand svg.dot,
  svg.auto-brand__dot,
  svg.mobility-brand__mark,
  svg.brandMark
) {
  padding: 8px;
}

body :is(.wordmark__text, .auto-sidebar__lede, .mobility-side-note, .brandCopy span) {
  color: var(--rm-muted);
}

body :is(
  .topbar,
  .auto-topbar,
  .mobility-topbar
) {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 20);
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  min-height: 64px;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-panel-radius);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  color: var(--rm-ink);
  background: var(--rm-topbar-bg);
  box-shadow: var(--rm-shadow-xs);
  backdrop-filter: blur(8px);
}

body :is(.topbar-actions, .auto-topbar-actions) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
  margin-left: auto;
}

body :is(.topbar-actions, .auto-topbar-actions) .radar-auth-menu {
  position: relative;
  top: auto;
  right: auto;
  z-index: auto;
  flex: 0 0 auto;
}

body :is(.topbar-actions, .auto-topbar-actions) .radar-auth-menu__trigger {
  min-height: 44px;
}

body :is(.topbar-actions, .auto-topbar-actions) .radar-auth-menu__pop {
  z-index: var(--z-overlay, 40);
}

body:has(.radar-auth-menu) :is(
  .topbar,
  .auto-topbar,
  .mobility-topbar,
  .radar-landing-topbar
) {
  padding-right: max(var(--space-4, 16px), var(--rm-auth-fixed-reserve));
}

body:has(:is(.topbar-actions, .auto-topbar-actions) .radar-auth-menu) :is(
  .topbar,
  .auto-topbar,
  .mobility-topbar
) {
  padding-right: var(--space-4, 16px);
}

body:has(.radar-auth-menu) .lang-switcher {
  right: calc(var(--rm-auth-fixed-reserve) + var(--space-3, 12px));
}

body :is(
  .searchbar,
  .auto-searchbar,
  .mobility-searchbar,
  .s3-search__row,
  .catalog-row
) {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-width: 0;
}

body :is(
  .searchwrap,
  .auto-searchwrap,
  .mobility-searchwrap,
  .topSearch,
  .s3-search__input,
  .search-input,
  .vc-input-shell
) {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: max(48px, var(--rm-control-height));
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-control-radius);
  padding: 0 var(--space-4, 16px);
  color: var(--rm-muted);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-sm);
  transition:
    border-color var(--rm-dur) var(--rm-ease),
    box-shadow var(--rm-dur) var(--rm-ease),
    background var(--rm-dur) var(--rm-ease);
}

body :is(
  .searchwrap,
  .auto-searchwrap,
  .mobility-searchwrap,
  .topSearch,
  .s3-search__input,
  .search-input,
  .vc-input-shell
):focus-within {
  border-color: var(--rm-primary);
  box-shadow: 0 0 0 3px var(--rm-ring), var(--rm-shadow-sm);
}

body :is(.searchwrap, .auto-searchwrap, .mobility-searchwrap, .s3-search__input, .search-input) input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  color: var(--rm-ink);
  background: transparent;
}

body :is(.searchwrap, .auto-searchwrap, .mobility-searchwrap, .s3-search__input, .search-input) input:focus {
  outline: 0;
}

body :is(
  .btn,
  .auto-btn,
  .vc-btn,
  .mobility-submit,
  .mobility-ghost,
  .offer-link,
  .mobility-link,
  .pool-card__install,
  .hero-primary-cta
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  min-height: 44px;
  border: 1px solid var(--rm-line-strong);
  border-radius: var(--rm-control-radius);
  padding: 0 var(--space-4, 16px);
  color: var(--rm-ink);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-xs);
  text-decoration: none;
  font-weight: 700;
  transition:
    transform var(--rm-dur) var(--rm-ease),
    border-color var(--rm-dur) var(--rm-ease),
    background var(--rm-dur) var(--rm-ease),
    color var(--rm-dur) var(--rm-ease),
    box-shadow var(--rm-dur) var(--rm-ease);
}

body :is(.btn, .auto-btn, .vc-btn, .mobility-ghost, .offer-link, .mobility-link, .pool-card__install):hover {
  border-color: var(--rm-primary);
  color: var(--rm-primary-strong);
  background: var(--rm-primary-wash);
  box-shadow: var(--rm-shadow-sm);
}

body :is(.btn, .auto-btn, .vc-btn, .mobility-submit, .mobility-ghost, .offer-link, .mobility-link, .pool-card__install, .hero-primary-cta):active {
  transform: translateY(1px);
}

body :is(
  .btn-primary,
  .btn-apply,
  .auto-btn--primary,
  .vc-btn--primary,
  .mobility-submit,
  .pool-card__install,
  .s3-cta,
  .detail-cta
) {
  border-color: var(--rm-primary);
  color: var(--rm-on-primary);
  background: var(--rm-primary);
}

body :is(.btn-primary, .btn-apply, .auto-btn--primary, .vc-btn--primary, .mobility-submit, .pool-card__install, .s3-cta, .detail-cta):hover {
  border-color: var(--rm-primary-strong);
  color: var(--rm-on-primary);
  background: var(--rm-primary-strong);
}

body :is(button, .btn, .auto-btn, .vc-btn):disabled {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
  transform: none;
}

body :is(
  .hero,
  .mobility-hero,
  .pool-header,
  .auto-hero,
  .s3-search,
  .s3-ai,
  .search-panel,
  .wizard-panel,
  .results-shell,
  .pool-results,
  .mobility-fit-advisor,
  .workflow-panel,
  .cta-box,
  .disclaimer-box,
  .warning-box,
  .merchant-card
) {
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-panel-radius);
  padding: var(--space-6, 24px);
  color: var(--rm-ink);
  background: var(--rm-card-bg);
  box-shadow: var(--rm-shadow-xs);
}

body :is(.hero__eyebrow, .vc-eyebrow, .eyebrow, .pool-results__head p, .auto-section-kicker) {
  color: var(--rm-primary-strong);
}

body :is(.hero__title, .pool-header h1, .mobility-hero h1, .section-title, .s3-title) {
  color: var(--rm-ink);
  letter-spacing: -0.025em;
}

body :is(.hero__lead, .pool-header__lead, .mobility-hero p, .section-sub, .s3-sub) {
  color: var(--rm-ink-soft);
}

body :is(
  .grid,
  .products-grid,
  .pool-grid,
  .mobility-grid,
  .results-grid,
  .s3-grid,
  .guides-grid,
  .kits-grid
) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--space-4, 16px);
}

body :is(
  .card,
  .product-card,
  .pool-card,
  .mobility-card,
  .auto-card,
  .s3-product,
  .market-card,
  .guide-card,
  .kit-col,
  .stat-card,
  .compare-chip,
  .auto-compare-chip,
  .mobility-watch-row,
  .auto-watch-row
) {
  overflow: hidden;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-card-radius);
  color: var(--rm-ink);
  background: var(--rm-card-bg);
  box-shadow: none;
  transition:
    transform var(--rm-dur) var(--rm-ease),
    border-color var(--rm-dur) var(--rm-ease),
    box-shadow var(--rm-dur) var(--rm-ease);
}

body :is(.card, .product-card, .pool-card, .mobility-card, .auto-card, .s3-product, .market-card, .guide-card) {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

body .card-hit {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  transform: none;
}

body .card-hit:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body :is(
  .thumb,
  .auto-card__media,
  .mobility-card__media,
  .s3-thumb,
  .product-img,
  .gallery-hero,
  .compare-thumb,
  .auto-compare-thumb,
  .compare-chip-thumb,
  .pool-card__icon
) {
  border-radius: var(--rm-radius-md);
  background: var(--rm-media-bg);
}

body :is(.body, .s3-body, .mobility-card__body, .auto-card__body, .product-card__header) {
  color: var(--rm-ink);
}

body :is(.brand-name, .product-brand, .auto-card__brand, .mobility-card__brand, .s3-brand) {
  color: var(--rm-muted);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
}

body :is(.title, .product-name, .auto-card__title, .mobility-card h2, .product-card h2, .s3-name) {
  color: var(--rm-ink);
  font-weight: 800;
  line-height: 1.2;
}

body :is(
  .price,
  .product-price,
  .auto-price,
  .auto-detail__price,
  .mobility-price,
  .mobility-detail__price,
  .s3-price,
  .kit-price,
  .stat-value,
  .offer-price
) {
  color: var(--rm-ink);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

body :is(
  .badge,
  .chip,
  .cat-chip,
  .market-pill,
  .chip-btn,
  .auto-badge,
  .auto-score-pill,
  .mobility-chip,
  .mobility-provider-chip,
  .mobility-badge,
  .pool-count,
  .s3-pill,
  .badge-merchant,
  .badge-seed,
  .offer-tag,
  .hero-stat,
  .mobility-hero__metrics span,
  .header-metrics span
) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--rm-primary) 22%, var(--rm-line));
  border-radius: var(--rm-radius-pill);
  padding: 3px 10px;
  color: var(--rm-primary-strong);
  background: var(--rm-primary-wash);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
}

body :is(.badge.deal, .saving, .hero-stat--accent, .pool-warning, .auto-warning, .mobility-warning) {
  border-color: color-mix(in srgb, var(--rm-warning) 42%, var(--rm-line));
  color: color-mix(in srgb, var(--rm-warning) 76%, var(--rm-ink));
  background: color-mix(in srgb, var(--rm-warning) 12%, var(--rm-surface));
}

body :is(.badge.active, .badge.seed, .seed-flag, .source-status-ok, .mobility-provider-chip[data-status="ok"]) {
  border-color: color-mix(in srgb, var(--rm-success) 42%, var(--rm-line));
  color: color-mix(in srgb, var(--rm-success) 72%, var(--rm-ink));
  background: color-mix(in srgb, var(--rm-success) 10%, var(--rm-surface));
}

body :is(.filterchips, .mobility-filterchips, .cat-chips, .s3-pills, .auto-score-pills) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
}

body :is(.providerChips, .source-list, .pool-source-list) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

body :is(.providerChips.sidebar-provider-chips) {
  margin-top: var(--space-2, 8px);
}

body :is(.providerChip, .source-list li, .pool-source-list li) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--rm-primary) 24%, var(--rm-line));
  border-radius: var(--rm-radius-pill);
  padding: 3px 10px;
  color: var(--rm-primary-strong);
  background: var(--rm-primary-wash);
  box-shadow: none;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    border-color var(--rm-dur) var(--rm-ease),
    background var(--rm-dur) var(--rm-ease),
    color var(--rm-dur) var(--rm-ease),
    box-shadow var(--rm-dur) var(--rm-ease);
}

body .providerChip {
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  white-space: nowrap;
}

body :is(.providerChip:hover, .source-list li:hover, .pool-source-list li:hover) {
  border-color: var(--rm-primary);
  background: color-mix(in srgb, var(--rm-primary) 16%, var(--rm-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-primary) 10%, transparent);
}

body :is(.providerChip.active, .providerChip[aria-pressed="true"]) {
  border-color: var(--rm-primary);
  background: var(--rm-primary);
  color: var(--rm-on-primary);
}

body :is(.providerChip span, .source-name, .pool-source-name) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body :is(.chipCount, .source-count, .pool-source-count) {
  border-radius: var(--rm-radius-pill);
  padding: 1px 6px;
  color: inherit;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 0.68rem;
  font-weight: 800;
}

body :is(.source-dot, .pool-source-dot) {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--rm-primary);
}

body .providerChip[aria-pressed="true"] :is(.chipCount, .source-count, .pool-source-count),
body .providerChip.active :is(.chipCount, .source-count, .pool-source-count) {
  background: color-mix(in srgb, white 22%, transparent);
}

body :is(
  .auto-sidebar__section,
  .sidebarSection
) {
  border: 0;
  border-top: 1px solid var(--rm-line);
  border-radius: 0;
  padding: var(--space-4, 16px) 0;
  color: var(--rm-ink);
  background: transparent;
  box-shadow: none;
}

body :is(
  .auto-sidebar__section:first-of-type,
  .sidebarSection:first-of-type
) {
  border-top: 0;
  padding-top: 0;
}

body :is(
  .auto-sidebar__section h2,
  .sidebarSection h2
) {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0 0 var(--space-3, 12px);
  color: var(--rm-ink);
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body :is(.auto-sidebar__section h2 svg, .sidebarSection h2 svg) {
  color: var(--rm-primary-strong);
}

body :is(.field, .auto-field, .mobility-field, .compactField, .s3-alert-field) {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body :is(.field label, .auto-field label, .auto-field > span, .mobility-field label, .compactField span, .s3-alert-field span, .s3-sort span) {
  color: var(--rm-muted);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  line-height: 1.25;
}

body :is(
  .field input,
  .field select,
  .auto-field input,
  .auto-field select,
  .mobility-field input,
  .mobility-field select,
  .s3-alert-field input,
  .catalog-controls input,
  .catalog-controls select,
  .vc-select
) {
  width: 100%;
  min-height: var(--rm-control-height);
  border: 1px solid var(--rm-line-strong);
  border-radius: var(--rm-control-radius);
  padding: 0 var(--space-3, 12px);
  color: var(--rm-ink);
  background: var(--rm-surface);
  font: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
}

body :is(
  .field input,
  .field select,
  .auto-field input,
  .auto-field select,
  .mobility-field input,
  .mobility-field select,
  .s3-alert-field input,
  .catalog-controls input,
  .catalog-controls select,
  .vc-select
):focus {
  outline: 0;
  border-color: var(--rm-primary);
  box-shadow: 0 0 0 3px var(--rm-ring);
}

/* Casa Radar filter controls: compact, matte fields instead of generic glass. */
body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) :is(
  .field,
  .auto-field,
  .mobility-field,
  .compactField
) {
  display: grid;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) :is(
  .field label,
  .auto-field label,
  .auto-field > span,
  .mobility-field label,
  .compactField span
) {
  color: var(--rm-muted);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  line-height: 1.25;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) :is(
  .vc-combobox-trigger,
  .field input,
  .auto-field input,
  .mobility-field input,
  .compactField input,
  select,
  .vc-select
) {
  width: 100%;
  min-height: 42px;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--rm-line-strong);
  border-radius: var(--rm-control-radius);
  padding: 0 var(--space-3, 12px);
  color: var(--rm-ink);
  background: var(--rm-surface);
  box-shadow: none;
  font: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
  text-align: left;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    border-color var(--rm-dur) var(--rm-ease),
    box-shadow var(--rm-dur) var(--rm-ease),
    background var(--rm-dur) var(--rm-ease);
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-trigger::before,
body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-trigger::after {
  display: none;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) :is(
  .vc-combobox-trigger:hover,
  .field input:hover,
  .auto-field input:hover,
  .mobility-field input:hover,
  .compactField input:hover,
  select:hover,
  .vc-select:hover
) {
  border-color: var(--rm-primary);
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) :is(
  .vc-combobox-trigger:focus-visible,
  .vc-combobox.is-open .vc-combobox-trigger,
  .field input:focus,
  .auto-field input:focus,
  .mobility-field input:focus,
  .compactField input:focus,
  select:focus,
  .vc-select:focus
) {
  outline: 0;
  border-color: var(--rm-primary);
  box-shadow: 0 0 0 3px var(--rm-ring);
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-value {
  color: var(--rm-ink);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-value.is-placeholder {
  color: var(--rm-muted);
  font-weight: 500;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-caret {
  width: 18px;
  height: 18px;
  background: transparent;
  box-shadow: none;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-caret::before {
  border-color: var(--rm-muted);
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-popover {
  top: calc(100% + var(--space-2, 8px));
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-md);
  color: var(--rm-ink);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox {
  width: 100%;
  min-width: 0;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) :is(.filters-toggle, .mobility-filters-toggle) {
  gap: var(--space-2, 8px);
  justify-content: flex-start;
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--rm-ink);
  background: transparent;
  box-shadow: none;
  font-size: var(--text-base, 1rem);
  font-weight: 600;
}

body :is(.filters-toggle, .mobility-filters-toggle)::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--rm-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rm-primary) 12%, transparent);
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) :is(.filters-toggle, .mobility-filters-toggle):hover {
  color: var(--rm-primary-strong);
  background: transparent;
  box-shadow: none;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-popover::before {
  display: none;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-search {
  border-bottom: 1px solid var(--rm-line);
  padding: var(--space-2, 8px);
  background: var(--rm-surface);
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-search input {
  min-height: 40px;
  border: 1px solid var(--rm-line-strong);
  border-radius: var(--rm-radius-sm);
  background: var(--rm-surface);
  box-shadow: none;
  font-size: var(--text-sm, 0.875rem);
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-search input:focus {
  outline: 0;
  border-color: var(--rm-primary);
  box-shadow: 0 0 0 3px var(--rm-ring);
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-list {
  max-height: min(320px, 48vh);
  padding: var(--space-1, 4px);
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-option {
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: var(--space-2, 8px);
  min-height: 40px;
  border-radius: var(--rm-radius-sm);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  transform: none;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-option::before {
  display: none;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) :is(
  .vc-combobox-option:hover,
  .vc-combobox-option:focus-visible
) {
  color: var(--rm-primary-strong);
  background: var(--rm-primary-wash);
  transform: none;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-option.is-selected {
  color: var(--rm-primary-strong);
  background: var(--rm-primary-wash);
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-option strong {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 650;
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-option i {
  background: var(--rm-surface);
  box-shadow: inset 0 0 0 1px var(--rm-line-strong);
}

body :is(
  .sidebar,
  .auto-sidebar,
  .mobility-sidebar
) .vc-combobox-option.is-selected i {
  background: var(--rm-primary);
  box-shadow: none;
}

body :is(.scrim, .pool-scrim) {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay, 40);
  background: var(--vc-scrim, rgba(17, 23, 20, 0.48));
  backdrop-filter: blur(3px);
}

body :is(
  .drawer,
  .auto-detail,
  .auto-watchlist-drawer,
  .mobility-detail,
  .pool-lead,
  .compare-view,
  .auto-compare-view
) {
  z-index: var(--z-modal, 50);
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-panel-radius);
  color: var(--rm-ink);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-lg);
}

body :is(.iconbtn, .mobility-iconbtn, .pool-lead__close, .searchclear, .auto-searchclear, .mobility-searchclear, .watch, .pool-ai-toggle, .ai-select-toggle) {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-pill);
  color: var(--rm-ink-soft);
  background: color-mix(in srgb, var(--rm-surface) 92%, transparent);
  box-shadow: var(--rm-shadow-xs);
}

body :is(.card .watch, .auto-card__watch, .mobility-card__watch, .ai-select-toggle) {
  opacity: 1;
}

body :is(.iconbtn, .mobility-iconbtn, .pool-lead__close, .searchclear, .auto-searchclear, .mobility-searchclear, .watch, .pool-ai-toggle, .ai-select-toggle):hover {
  border-color: var(--rm-primary);
  color: var(--rm-primary-strong);
  background: var(--rm-primary-wash);
}

body :is(.watch.active, .watch.on, .watch[aria-pressed="true"], .ai-select-toggle[aria-pressed="true"], .mobility-card__watch.is-active, .mobility-card__compare.is-active) {
  border-color: var(--rm-primary);
  color: var(--rm-on-primary);
  background: var(--rm-primary);
}

body :is(
  .empty,
  .empty-state,
  .pool-empty,
  .auto-empty,
  .s3-status
) {
  border: 1px dashed var(--rm-line-strong);
  border-radius: var(--rm-card-radius);
  padding: var(--space-8, 32px);
  color: var(--rm-muted);
  background: color-mix(in srgb, var(--rm-surface) 70%, transparent);
  text-align: center;
}

body :is(.result-trust, .source-meta, .product-source, .offer-meta, .freshness) {
  color: var(--rm-muted);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 650;
  line-height: 1.4;
}

body :is(.error, .error-state, .pool-error, .auto-error, .s3-error) {
  border: 1px solid color-mix(in srgb, var(--rm-danger) 46%, var(--rm-line));
  border-radius: var(--rm-card-radius);
  padding: var(--space-4, 16px);
  color: color-mix(in srgb, var(--rm-danger) 78%, var(--rm-ink));
  background: color-mix(in srgb, var(--rm-danger) 8%, var(--rm-surface));
}

body :is(.skeleton, .skeleton-card, .pool-skeleton, .mobility-skeleton, .s3-skeleton, .sk-line, .sk-img) {
  border-radius: var(--rm-radius-md);
  background:
    linear-gradient(100deg, var(--rm-surface-soft) 30%, color-mix(in srgb, var(--rm-surface) 70%, white) 50%, var(--rm-surface-soft) 70%);
  background-size: 200% 100%;
  animation: radarMarketShimmer 1.2s ease-in-out infinite;
}

@keyframes radarMarketShimmer {
  to {
    background-position: -200% 0;
  }
}

body :is(.radar-ai-panel, .radar-ai-selection-bar, .radar-ai-drawer, .radar-alert-panel, .s3-alert-panel, .topbar-alert .radar-alert-panel) {
  border: 1px solid color-mix(in srgb, var(--rm-primary) 28%, var(--rm-line));
  border-radius: var(--rm-panel-radius);
  color: var(--rm-ink);
  background: var(--rm-card-bg);
  box-shadow: var(--rm-shadow-sm);
}

body :is(.compare-tray, .auto-compare-tray) {
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-panel-radius);
  padding: var(--space-3, 12px);
  background: var(--rm-topbar-bg);
  box-shadow: var(--rm-shadow-md);
  backdrop-filter: blur(8px);
}

body :is(.compare-grid, .auto-compare-grid) {
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-card-radius);
  overflow: hidden;
  background: var(--rm-surface);
}

body :is(.compare-head, .compare-label, .compare-cell, .auto-compare-head, .auto-compare-label, .auto-compare-cell) {
  border-color: var(--rm-line);
  background: var(--rm-surface);
}

body :is(.compare-cell.best, .auto-compare-cell.is-best, .compare-best) {
  background: var(--rm-primary-wash);
  color: var(--rm-primary-strong);
}

body :is(.prime-footer, .s3-footer) {
  width: min(1120px, calc(100% - 2 * var(--space-6, 24px)));
  margin: var(--space-8, 32px) auto var(--space-6, 24px);
  border-top: 1px solid var(--rm-line);
  padding-top: var(--space-4, 16px);
  color: var(--rm-muted);
  text-align: center;
}

body :is(.prime-footer a, .s3-footer a, .linkish, .mobility-linkish) {
  color: var(--rm-primary-strong);
}

@media (hover: hover) and (pointer: fine) {
  body :is(.card, .product-card, .pool-card, .mobility-card, .auto-card, .s3-product, .market-card, .guide-card):hover {
    border-color: color-mix(in srgb, var(--rm-primary) 44%, var(--rm-line));
    box-shadow: var(--rm-shadow-md);
    transform: translateY(-2px);
  }
}

@media (pointer: coarse) {
  body :is(button, input, select, textarea, .btn, .auto-btn, .vc-btn) {
    min-height: 44px;
  }
}

@media (max-width: 980px) {
  body :is(.shell, .auto-shell, .mobility-shell) {
    grid-template-columns: 1fr;
    width: min(100% - 2 * var(--space-4, 16px), 860px);
    margin-top: var(--space-4, 16px);
  }

  body :is(.sidebar, .auto-sidebar, .mobility-sidebar) {
    position: static;
    max-height: none;
  }

  body :is(.topbar, .auto-topbar, .mobility-topbar) {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  body :is(.shell, .auto-shell, .mobility-shell) {
    width: min(100% - 2 * var(--space-3, 12px), 100%);
  }

  html[data-radar-polish="open-design"] body :is(.shell, .auto-shell, .mobility-shell) {
    gap: var(--space-3, 12px);
    margin-top: var(--space-3, 12px);
  }

  html[data-radar-polish="open-design"] body :is(
    .sidebar,
    .auto-sidebar,
    .mobility-sidebar
  ) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2, 8px) var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
  }

  html[data-radar-polish="open-design"] body :is(
    .sidebar,
    .auto-sidebar,
    .mobility-sidebar
  ) > :is(.wordmark, .brand, .auto-brand, .mobility-brand) {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin: 0;
  }

  html[data-radar-polish="open-design"] body :is(
    .sidebar,
    .auto-sidebar,
    .mobility-sidebar
  ) > :is(.filters-toggle, .mobility-filters-toggle) {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: auto;
    min-width: 44px;
    margin: 0;
    padding-inline: var(--space-3, 12px);
  }

  html[data-radar-polish="open-design"] body :is(
    .sidebar,
    .auto-sidebar,
    .mobility-sidebar
  ) > :is(.sidebar-fields, .auto-sidebar__section, .mobility-sidebar__fields, .pool-safety) {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: var(--space-2, 8px);
  }

  html[data-radar-polish="open-design"] body :is(
    .sidebar,
    .auto-sidebar,
    .mobility-sidebar
  ) > :is(.linkish, .theme-toggle, .btn-feedback):not(.brand) {
    width: fit-content;
    margin: 0;
  }

  html[data-radar-polish="open-design"] body :is(
    .wordmark__mark,
    .sidebar .brand .dot,
    .auto-brand__dot,
    .mobility-brand__mark,
    .brandMark
  ) {
    width: 36px;
    height: 36px;
  }

  html[data-radar-polish="open-design"] body :is(
    svg.wordmark__mark,
    .sidebar .brand svg.dot,
    svg.auto-brand__dot,
    svg.mobility-brand__mark,
    svg.brandMark
  ) {
    padding: 7px;
  }

  body :is(.topbar, .auto-topbar, .mobility-topbar, .hero, .mobility-hero, .pool-header, .s3-search) {
    border-radius: var(--rm-radius-md);
    padding: var(--space-4, 16px);
  }

  body:has(.radar-auth-menu) :is(.topbar, .auto-topbar, .mobility-topbar, .radar-landing-topbar) {
    padding-right: max(var(--space-4, 16px), var(--rm-auth-fixed-reserve));
  }

  body:has(:is(.topbar-actions, .auto-topbar-actions) .radar-auth-menu) :is(.topbar, .auto-topbar, .mobility-topbar) {
    padding-right: var(--space-4, 16px);
  }

  html[data-radar-polish="open-design"] body:has(.radar-auth-menu) :is(.topbar, .auto-topbar, .mobility-topbar) {
    padding-right: var(--space-4, 16px);
  }

  body :is(.searchbar, .auto-searchbar, .mobility-searchbar, .s3-search__row, .catalog-row) {
    flex-direction: column;
    align-items: stretch;
  }

  html[data-radar-polish="open-design"] body .catalog-row > :is(.catalog-select, .catalog-payment-field) {
    flex: none;
    width: 100%;
  }

  html[data-radar-polish="open-design"] body .catalog-row .toggle-label {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
  }

  html[data-radar-polish="open-design"] body .catalog-row .toggle-label input {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
  }

  html[data-radar-polish="open-design"] body :is(.searchbar, .auto-searchbar, .mobility-searchbar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    flex: 0 0 100%;
    flex-direction: initial;
    align-items: stretch;
    order: 10;
    width: 100%;
  }

  html[data-radar-polish="open-design"] body :is(.searchwrap, .auto-searchwrap, .mobility-searchwrap) {
    width: 100%;
  }

  html[data-radar-polish="open-design"] body :is(.searchbar, .auto-searchbar, .mobility-searchbar) > :is(
    .btn,
    .auto-btn,
    .mobility-submit
  ) {
    width: auto;
    min-width: 44px;
    padding-inline: var(--space-4, 16px);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  body :is(.card, .product-card, .pool-card, .mobility-card, .auto-card, .s3-product, .market-card, .guide-card):hover {
    transform: none;
  }

  body :is(.skeleton, .skeleton-card, .pool-skeleton, .mobility-skeleton, .s3-skeleton, .sk-line, .sk-img) {
    animation: none;
  }
}

@media (forced-colors: active) {
  body :is(
    .btn,
    .auto-btn,
    .vc-btn,
    .card,
    .product-card,
    .pool-card,
    .mobility-card,
    .auto-card,
    .s3-product,
    .market-card,
    .empty-state,
    .error-state
  ) {
    border: 1px solid CanvasText;
    box-shadow: none;
  }

  body :is(.btn-primary, .auto-btn--primary, .vc-btn--primary, .mobility-submit, .pool-card__install) {
    color: ButtonText;
    background: ButtonFace;
  }
}