/* ==========================================================================
   V2 FOUNDATION — canonical runtime ownership
   Migrated from retired styles.css.
   ========================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

button:focus-visible,
li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@keyframes selectionIceItemIn {
  to {
    opacity: 1;
    transform:
      translate3d(0,0,0)
      scale(1);
  }
}

@keyframes brandFinderReveal {
  from {
    opacity: 0;
    transform:
      translate3d(0,10px,0)
      scale(.982);
  }
  to {
    opacity: 1;
    transform:
      translate3d(0,0,0)
      scale(1);
  }
}

@keyframes vehicleProgressTravel {
  from {
    left: -38%;
  }
  to {
    left: 105%;
  }
}

/* ============================================================
   MASLO MIGOM — UI V2
   Light / monochrome
   Part 01: Base + Header + Vehicle Hero + Vehicle Picker
   ============================================================ */

:root {
  --mm-picker-backdrop: rgba(17, 17, 17, .26);
  --mm-picker-panel-bg: #fff;
  --mm-picker-panel-border: 1px solid var(--mm-control-border);
  --mm-picker-panel-radius: 26px;
  --mm-picker-panel-shadow: 0 28px 80px rgba(0, 0, 0, .12);
  --mm-picker-trigger-border: 1px solid var(--mm-control-border);
  --mm-picker-card-bg: #fff;
  --mm-picker-card-border: 1px solid rgba(145,158,187,.34);
  --mm-picker-card-shadow: var(--mm-item-shadow);
  --mm-surface-dark: rgb(26, 26, 26);
  --mm-section-border: 5px solid #f7f8fc;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --accent: #14b8a6;
  --text-main: #142729;
  --text-muted: #6d7d7f;
  --mm-bg: rgb(239, 242, 247);
  --mm-surface: #ffffff;
  --mm-surface-soft: #f9f9f9;
  --mm-surface-hover: #ffffff;
  --mm-popup-bg: #fcfcfc;
  --mm-popup-item: #ffffff;
  --mm-item-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .035);
  --mm-text: rgba(26, 43, 77, .6);
  --mm-text-secondary: rgb(30, 36, 46);
  --mm-text-muted: #969696;
  --mm-text-disabled: rgba(26, 43, 77, .32);
  --mm-border: #ececec;
  --mm-border-strong: #e3e3e3;
  --mm-control-border: rgba(165,177,202,.38);
  --mm-black: #0d0d0d;
  --mm-black-hover: #303030;
  --mm-status: #f2a33b;
  --mm-cta-primary: #ffd426;
  --mm-select-hover-bg: rgb(37, 42, 56);
  --mm-select-selected-bg: rgb(67, 45, 176);
  --mm-selected-shadow: inset 3px 0 0 var(--mm-cta-primary), var(--mm-item-shadow);
  --mm-select-hover-color: rgb(255, 255, 255);
  --mm-container: 1460px;
  --mm-radius-large: 32px;
  --mm-radius-medium: 18px;
  --mm-radius-control: 12px;
  --mm-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .035);

  --mm-title-color: rgb(30, 36, 46);
  --mm-picker-bg: #eff2f7;
  --mm-control-surface: rgba(176, 189, 214, .12);
  --mm-control-surface-strong: rgba(176, 189, 214, .2);
  --mm-cta-on-primary: #000;
  --mm-info-surface: rgb(232, 243, 254);
  --mm-info-surface-strong: rgb(246, 251, 255);
  --mm-info-color: #18436B;
  --mm-role-alternative-color: rgb(122, 204, 41);
  --mm-role-primary-color: #f23b3b;
  --mm-info-border: rgb(209, 227, 255);
--mm-recommend-surface: #f2f5f2;
  --mm-recommend-surface-strong: #d7e8d8;
--mm-section-title-size: 24px;
  --mm-section-title-size-mobile: 20px;
  --mm-section-title-line-height: 1.2;
  --mm-section-title-weight: 650;
  --mm-section-title-letter-spacing: -.02em;


  /* Canonical spec / fact icon */
  --mm-spec-icon-size: 34px;
  --mm-spec-icon-padding: 7px;
--mm-spec-icon-radius: 10px;
  --mm-spec-icon-bg: var(--mm-surface-dark);
  --mm-spec-icon-color: #fff;
  --mm-spec-icon-shadow: none;
  --mm-spec-icon-svg-size: 17px;

  --mm-spec-icon-mobile-size: 32px;
  --mm-spec-icon-mobile-padding: 6px;
  --mm-spec-icon-mobile-radius: 9px;
  --mm-picker-control-bg: rgb(255, 255, 255);
}

/* ============================================================
   BASE
   ============================================================ */

html {
  background: var(--mm-bg);
  color-scheme: light;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--mm-bg);
  color: var(--mm-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================================================
   HEADER
   ============================================================ */

/* ============================================================
   PAGE
   ============================================================ */

/* ============================================================
   VEHICLE HERO
   ============================================================ */

.vehicle-hero {
  --brand-rgb: 130, 130, 130;
  --brand-rgb-2: 150, 150, 150;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding:
    30px
    32px
    24px;
  border: var(--mm-section-border);
  border-radius:
    var(--mm-radius-large);
  background: rgb(255, 255, 255);
  box-shadow: 0 10px 20px rgba(165,177,202,.3), 0 3px 6px rgba(165,177,202,.3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: all .2s ease-in;}

.vehicle-hero::before {
  display: none;
}

/* ============================================================
   VEHICLE COLOR AMBIENT LIGHT
   Existing JS may change --brand-rgb / --brand-rgb-2
   ============================================================ */

.vehicle-hero__ambient {
  position: absolute;
  z-index: 0;
  width: 720px;
  height: 580px;
  right: -170px;
  top: -220px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(var(--brand-rgb), .11) 0%,
      rgba(var(--brand-rgb-2), .055) 43%,
      transparent 72%
    );
  filter: blur(34px);
  opacity: 1;
  pointer-events: none;
}

/* ============================================================
   HERO TOP
   ============================================================ */

.vehicle-hero__top {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.vehicle-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding:
    0
    13px;
  border:
    1px solid
    var(--mm-border);
  border-radius: 999px;
  background:
    var(--mm-surface-soft);
  color:
    var(--mm-text-secondary);
  box-shadow: none;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .055em;
}

.vehicle-hero__status {
  display: flex;
  align-items: center;
  gap: 8px;
  color:
    var(--mm-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.vehicle-hero__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background:
    var(--mm-status);
  box-shadow: none;
}

/* ============================================================
   HERO GRID
   ============================================================ */

.vehicle-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(0, 6fr)
    minmax(390px, 6fr);
  align-items: center;
  gap: 36px;
  min-height: 310px;
}

.vehicle-hero__content {
  position: relative;
  z-index: 4;
  max-width: 690px;
}

/* ============================================================
   HERO TYPOGRAPHY
   ============================================================ */

/* ============================================================
   VEHICLE VISUAL
   ============================================================ */

.vehicle-hero__visual {
  position: relative;
  min-width: 0;
  height: 300px;
  pointer-events: none;
}

.vehicle-hero__brand-mark {
  position: static;

  display: block;

  width: auto;
  height: 120px;

  max-width: 170px;

  margin:
    0
    0
    12px;

  object-fit: contain;
  object-position: left center;

  filter: none;
  opacity: 1;
}

.vehicle-hero__car {
  position: absolute;
  z-index: 3;
  width: 108%;
  height: 110%;
  right: -6%;
  bottom: -8%;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(
      0
      20px
      17px
      rgba(0, 0, 0, .13)
    );
}

/* JPG vehicle images:
   white background becomes a deliberate studio surface. */

.vehicle-hero--frozen-car
.vehicle-hero__visual {
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  box-shadow:
    inset
    0
    -32px
    48px
    rgba(0, 0, 0, .025);
}

.vehicle-hero--frozen-car
.vehicle-hero__car {
  width: 96%;
  height: 94%;
  right: 2%;
  bottom: 3%;
  filter:
    drop-shadow(
      0
      16px
      15px
      rgba(0, 0, 0, .09)
    );
}

.cable {
  display: none;
}

/* ============================================================
   END VEHICLE STEPPER — V2
   ============================================================ */

/* ============================================================
   SELECT CONTROLS
   ============================================================ */

.dropdown {
  width: 100%;
  min-height: 62px;
  padding:
    0
    18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--mm-info-border);
  border-radius:
    var(--mm-radius-control);
  background: var(--mm-info-surface-strong);
  color: var(--mm-text);
  box-shadow:
    0 1px 2px rgba(8, 66, 160, .035),
    0 4px 10px rgba(8, 66, 160, .045);
  font-family:
    Inter,
    sans-serif;
  font-size: 14px;
text-align: left;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.dropdown:not(:disabled):hover {
  border-color: rgba(165,177,202,.58);
  background: var(--mm-control-surface-strong);
  box-shadow: none;
  color: var(--mm-text);}

.dropdown[aria-expanded="true"] {
  border-color: rgba(165,177,202,.68);
  background: var(--mm-control-surface-strong);
  box-shadow: 0 0 0 2px rgba(165,177,202,.10);
  color: var(--mm-text);}

.dropdown:disabled {
  background: rgba(176,189,214,.12);
  color: var(--mm-text-disabled);
  border-color: transparent;}

.dropdown__value {
  color:
    var(--mm-info-color);
}


.dropdown__chevron {
  color:
    var(--mm-text-secondary);
}

/* ============================================================
   DROPDOWN LIST
   ============================================================ */

.dropdown__list {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 290px;
  margin-top: 7px;
  padding: 6px;
  overflow-y: auto;
  border:
    1px solid
    var(--mm-border);
  border-radius: 14px;
  background:
    var(--mm-surface);
  box-shadow:
    0
    22px
    55px
    rgba(0, 0, 0, .10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dropdown__list li {
  padding:
    11px
    12px;
  border-radius: 9px;
  color:
    var(--mm-text-secondary);
  font-size: 14px;
}

.dropdown__list li:hover,
.dropdown__list li:focus {
  outline: none;
  background:
    var(--mm-surface-soft);
  color:
    var(--mm-text);
}

@media (max-width: 980px) {
  .vehicle-hero__grid {
    grid-template-columns:
      minmax(0, .9fr)
      minmax(330px, 1.1fr);
    gap: 20px;
  }
}

@media (max-width: 620px) {

  .vehicle-hero__brand-mark {
    height: 60px;
    max-width: 145px;
    margin-bottom: 9px;
  }

  :root {
    --mm-radius-large: 22px;
    --mm-radius-medium: 16px;
    --mm-radius-control: 11px;
  }
  .vehicle-hero {
    padding:
      18px
      16px
      16px;
  }
  .vehicle-hero__top {
    margin-bottom: 18px;
  }
  .vehicle-hero__grid {
    grid-template-columns:
      minmax(0, 1fr);
    gap: 15px;
    min-height: 0;
  }
  .vehicle-hero__visual {
    height: 210px;
  }
  .dropdown {
    min-height: 56px;
  }
}

/* ============================================================

/* ============================================================
   MASLO MIGOM — UI V2
   Part 02: Vehicle Selection Dialogs
   ============================================================ */

/* ============================================================
   02.01 — DIALOG SHELL
   ============================================================ */

body.brand-picker-open,
body.selection-picker-open {
  overflow: hidden;
}

.brand-picker,
.selection-picker {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.brand-picker[hidden],
.selection-picker[hidden] {
  display: none;
}

/* Backdrop */

.brand-picker__backdrop,
.selection-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .26);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .2s ease;
}

.brand-picker--open .brand-picker__backdrop,
.selection-picker--open .selection-picker__backdrop {
  opacity: 1;
}

/* Panel */

.brand-picker__panel {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100vw - 56px));
  max-height: min(840px, calc(100vh - 56px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--mm-border);
  border-radius: 26px;
  color: var(--mm-text);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .12);
  opacity: 0;
  transform: translateY(10px) scale(.995);
  transition:
    opacity .2s ease,
    transform .22s ease;
}

.selection-picker__panel {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100vw - 56px));
  max-height: min(840px, calc(100vh - 56px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--mm-border);
  border-radius: 26px;
  color: var(--mm-text);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .12);
  opacity: 0;
  transform: translateY(10px) scale(.995);
  transition:
    opacity .2s ease,
    transform .22s ease;
}

.brand-picker__panel::before,
.brand-picker__panel::after,
.selection-picker__panel::before,
.selection-picker__panel::after {
  display: none;
}

.brand-picker--open .brand-picker__panel,
.selection-picker--open .selection-picker__panel {
  opacity: 1;
  transform: none;
}

/* ============================================================
   02.02 — HEADER
   ============================================================ */

.brand-picker__header {
  position: relative;
  flex: 0 0 auto;
  padding:
    26px
    76px
    22px
    30px;
  text-align: left;
}

.selection-picker__header {
  position: relative;
  flex: 0 0 auto;
  padding:
    26px
    76px
    22px
    30px;
  text-align: left;
}

.brand-picker__kicker,
.selection-picker__kicker {
  margin: 0 0 6px;
  color: var(--mm-text-muted);
  font-family: Inter, sans-serif;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.brand-picker__title,
.selection-picker__title,
.stage__title,
.vehicle-picker__title,
.service-dashboard__title,
.service-dashboard__vehicle-promo-title,
.oil-choice__title,
.filter-choice__title,
.catalog-calculator__title {
  margin: 0;
  color: var(--mm-title-color);
  font-family: Inter, sans-serif;
  font-size: var(--mm-section-title-size);
  line-height: var(--mm-section-title-line-height);
  font-weight: var(--mm-section-title-weight);
  letter-spacing: var(--mm-section-title-letter-spacing);
}

/* Close */

.brand-picker__close,
.selection-picker__close {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mm-border);
  border-radius: 50%;
  background: var(--mm-surface-soft);
  cursor: pointer;
  transition:
    background-color .15s ease,
    border-color .15s ease;
}

.brand-picker__close:hover,
.selection-picker__close:hover {
  border-color: var(--mm-border-strong);
  background: var(--mm-surface-hover);
}

.brand-picker__close span,
.selection-picker__close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: 0;
  border-radius: 2px;
  background: var(--mm-text);
  transform-origin: center;
}

.brand-picker__close span:first-child,
.selection-picker__close span:first-child {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}

.brand-picker__close span:last-child,
.selection-picker__close span:last-child {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}

/* ============================================================
   02.03 — BRAND FINDER
   ============================================================ */

/* Search */

/* Alphabet */

/* ============================================================
   02.04 — SCROLL AREAS
   ============================================================ */

.brand-picker__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d7d7d7 transparent;
}

.selection-picker__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d7d7d7 transparent;
}

.brand-picker__scroll::-webkit-scrollbar,
.selection-picker__scroll::-webkit-scrollbar {
  width: 7px;
}

.brand-picker__scroll::-webkit-scrollbar-track,
.selection-picker__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.brand-picker__scroll::-webkit-scrollbar-thumb,
.selection-picker__scroll::-webkit-scrollbar-thumb {
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d7d7d7;
}

@media (max-width: 800px) {
  .brand-picker,
  .selection-picker {
    padding: 18px;
  }
  .brand-picker__panel,
  .selection-picker__panel {
    width: calc(100vw - 36px);
    max-height: calc(100vh - 36px);
    border-radius: 22px;
  }
  .brand-picker__header,
  .selection-picker__header {
    padding:
      22px
      66px
      18px
      20px;
  }
}

@media (max-width: 620px) {
  .brand-picker,
  .selection-picker {
    align-items: flex-end;
    padding: 0;
  }
  .brand-picker__backdrop,
  .selection-picker__backdrop {
    background: rgba(17, 17, 17, .32);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  .brand-picker__panel,
  .selection-picker__panel {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius:
      22px
      22px
      0
      0;
    transform: translateY(22px);
    box-shadow:
      0 -14px 50px rgba(0, 0, 0, .12);
  }
  .brand-picker--open .brand-picker__panel,
  .selection-picker--open .selection-picker__panel {
    transform: none;
  }
  .brand-picker__header,
  .selection-picker__header {
    padding:
      19px
      60px
      15px
      15px;
  }
  .brand-picker__title,
  .selection-picker__title {
    font-size: 24px;
  }
  .brand-picker__close,
  .selection-picker__close {
    top: 14px;
    right: 15px;
    width: 37px;
    height: 37px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-picker__backdrop,
  .selection-picker__backdrop,
  .brand-picker__panel,
  .selection-picker__panel,
  .brand-picker__item,
  .brand-picker__hero-car,
  .selection-picker__item,
  .selection-picker__item-arrow {
    transition: none;
  }
}

/* ============================================================
   03.01 — SERVICE DASHBOARD / VEHICLE SUMMARY
   CHECKPOINT 2026-08-09

   canvas  : var(--mm-popup-bg)
   cards   : #fff
   border  : var(--mm-border)
   shadow  : var(--mm-item-shadow)

   No gradients.
   ============================================================ */

.service-dashboard {
  position: relative;
  display: block;
  min-width: 0;
  margin-bottom: 18px;
  padding:
    34px
    34px
    30px;
  overflow: hidden;
  border: var(--mm-section-border);
  border-radius:
    var(--mm-radius-large);
  background: rgb(255, 255, 255);
  box-shadow: 0 10px 20px rgba(165,177,202,.3), 0 3px 6px rgba(165,177,202,.3);
  color:
    var(--mm-text);
  transition: all .2s ease-in;}

/* ------------------------------------------------------------
   HEADER
   lives directly on popup background
   ------------------------------------------------------------ */

.service-dashboard__hero {
  padding: 0;
}

.service-dashboard__eyebrow {
  margin:
    0
    0
    14px;
  color:
    var(--mm-text-muted);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.service-dashboard__hero-heading {
  min-width: 0;
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr);
  align-items: center;
  column-gap: 20px;
}

.service-dashboard__brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.service-dashboard__brand-logo {
  display: block;
  width: auto;
  height: 38px;
  max-width: 112px;
  object-fit: contain;
  object-position: center;
}

.service-dashboard__heading-content {
  min-width: 0;
}

.service-dashboard__title {
  max-width: 100%;
  margin: 0;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size:
    clamp(
      32px,
      3.4vw,
      52px
    );
  line-height: 1.03;
  font-weight: 700;
  letter-spacing: -.042em;
}

.service-dashboard__modification {
  margin:
    9px
    0
    0;
  color:
    var(--mm-text-secondary);
  font-family:
    Inter,
    sans-serif;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
}

/* ------------------------------------------------------------
   TOP FACTS
   four independent white grid cards
   ------------------------------------------------------------ */








/* ------------------------------------------------------------
   SEO TEXT
   separate white card
   ------------------------------------------------------------ */

.oil-fit-explanation {
  position: relative;
  display: grid;
  margin-top: 12px;
  padding: 16px 22px;
  border: 1px solid var(--mm-info-border);
  border-radius:
    16px;
  background: var(--mm-info-surface);
  box-shadow: none;
  transition: all .2s ease-in;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: center;
  column-gap: 28px;
}

.oil-fit-explanation__content {
  min-width: 0;
  width: 100%;
}

.oil-fit-explanation__visual {
  min-width: 0;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.oil-fit-explanation__placeholder {
  position: relative;

  width: 100%;
  max-width: 220px;
}

.oil-fit-explanation__image {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}

.oil-fit-explanation__title {
  margin:
    0
    0
    8px;
  color: var(--mm-info-color);
  font-family:
    Inter,
    sans-serif;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.016em;
}

.oil-fit-explanation__text {
  max-width: none;
  margin: 0;
  color: var(--mm-info-color);
  font-family:
    Inter,
    sans-serif;
  font-size: 13px;
  line-height: 1.48;
}

/* ------------------------------------------------------------
   TRUST
   three independent white cards
   ------------------------------------------------------------ */

.service-dashboard__trust {
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, .72fr) minmax(0, .72fr);
  gap: 16px;
  margin-top: 12px;
  align-items: stretch;
}

.service-dashboard__trust-item {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding:
    9px
    12px;
  border: 1px solid rgba(145,158,187,.34);
  border-radius:
    13px;
  background:
    var(--mm-popup-item);
  box-shadow:
    var(--mm-item-shadow);
  color:
    var(--mm-text-secondary);
  font-family:
    Inter,
    sans-serif;
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: 500;
}

.service-dashboard__trust-icon {
  width: 26px;
  height: 26px;
  flex:
    0
    0
    26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(145,158,187,.34);
  border-radius: 8px;
  background:
    var(--mm-surface-soft);
  color:
    var(--mm-black);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

@media (max-width: 980px) {
  }

@media (max-width: 720px) {
  .service-dashboard {
    padding:
      22px
      18px
      20px;
    border-radius: 24px;
  }
  .service-dashboard__hero-heading {
    grid-template-columns:
      1fr;
    row-gap: 12px;
  }
  .service-dashboard__brand-mark {
    justify-content: flex-start;
  }
  .service-dashboard__brand-logo {
    height: 32px;
    max-width: 90px;
  }
  .service-dashboard__title {
    font-size:
      clamp(
        28px,
        8.5vw,
        40px
      );
  }
  .service-dashboard__modification {
    font-size: 14px;
  }
    .oil-fit-explanation {
    padding:
      17px
      16px;
    border-radius: 15px;
  grid-template-columns: 1fr;
  row-gap: 12px;
}

.oil-fit-explanation__visual {
  display: none;
}

  .oil-fit-explanation__text {
    font-size: 13px;
  }
  .service-dashboard__trust {
    grid-template-columns:
      1fr;
    gap: 8px;
  }
}

/* ============================================================
   03.02 — SERVICE DASHBOARD / VEHICLE COLUMN
   CHECKPOINT 2026-08-09

   LEFT COLUMN STRUCTURE:
   1. Car image — separate card
   2. Vehicle facts — separate card / vertical list
   3. Promo — separate card below

   Page background stays white.
   Every element uses its own:
   background: var(--mm-popup-bg)
   box-shadow: var(--mm-item-shadow)

   NO gradients.
   ============================================================ */

/* ============================================================
   VEHICLE PICKER — V2
   Single owner: styles-v2.css
   ============================================================ */

/* ---------- MOBILE ---------- */

/* ============================================================
   END VEHICLE PICKER — V2
   ============================================================ */

/* ============================================================
   SERVICE DASHBOARD — BODY LAYOUT
   Migrated from legacy styles.css
   ============================================================ */

.service-dashboard__body {
  display: grid;
  grid-template-columns:
    minmax(330px, .76fr)
    minmax(540px, 1.44fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
  padding-top: 15px;
}

@media (max-width: 980px) {
  .service-dashboard__body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .service-dashboard__body {
    gap: 10px;
  }
}

.service-dashboard__vehicle-column {
  min-width: 0;
  display: grid;
  flex-direction: column;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 12px;
  align-self: start;
}

.service-dashboard__vehicle-title {
  margin: 0 12px;
  padding: 0;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.015em;
  text-align: center;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-dashboard__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin-top: 0;
}

/* ------------------------------------------------------------
   CAR IMAGE — SEPARATE CARD
   ------------------------------------------------------------ */

.service-dashboard__media {
  position: relative;
  min-width: 0;
  min-height: 245px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding:
    18px
    16px;
  overflow: hidden;
  border: 1px solid rgba(145,158,187,.34);
  border-radius:
    22px;
  background:
    var(--mm-popup-bg);
  box-shadow:
    var(--mm-item-shadow);
}

.service-dashboard__image {
  display: block;
  width: 100%;
  max-width: 390px;
  height: auto;
  margin: auto;
  object-fit: contain;
  object-position: center;
  filter: none;
}

/* ------------------------------------------------------------
   VEHICLE FACTS — SEPARATE CARD / VERTICAL LIST
   ------------------------------------------------------------ */

.service-dashboard__vehicle-facts {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding:
    7px
    16px;
  border: 1px solid rgba(145,158,187,.34);
  border-radius:
    18px;
  background:
    var(--mm-popup-bg);
  box-shadow:
    var(--mm-item-shadow);
}

.service-dashboard__vehicle-fact {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns:
    38px
    minmax(0, 1fr)
    minmax(90px, auto);
  align-items: center;
  column-gap: 13px;
  padding:
    11px
    2px;
  border: 0;
  border-radius: 0;
  background:
    transparent;
  box-shadow:
    none;
}

.service-dashboard__vehicle-fact +
.service-dashboard__vehicle-fact {
  border-top:
    1px solid
    var(--mm-border);
}

.service-dashboard__vehicle-fact
.catalog-spec__icon {
  grid-column: 1;
}

.service-dashboard__vehicle-fact-content {
  grid-column:
    2 / 4;
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(90px, auto);
  align-items: center;
  gap: 16px;
}

.service-dashboard__vehicle-fact-label {
  display: block;
  min-width: 0;
  color:
    var(--mm-text-secondary);
  font-family:
    Inter,
    sans-serif;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.service-dashboard__vehicle-fact-value {
  display: block;
  min-width: 0;
  color:
    var(--mm-text);
  font-family:
    Inter,
    sans-serif;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
  text-align: right;
}

@media (max-width: 980px) {
  .service-dashboard__media {
    min-height: 220px;
  }
}

@media (max-width: 720px) {
  .service-dashboard__identity {
    gap: 12px;
  }
  .service-dashboard__media {
    min-height: 190px;
    padding:
      14px;
  }
  .service-dashboard__vehicle-facts {
    padding:
      5px
      13px;
    border-radius:
      16px;
  }
  .service-dashboard__vehicle-fact {
    min-height: 62px;
    grid-template-columns:
      34px
      minmax(0, 1fr);
    column-gap: 11px;
    padding:
      10px
      0;
  }
  .service-dashboard__vehicle-fact-content {
    grid-column: 2;
    grid-template-columns:
      minmax(0, 1fr)
      auto;
    gap: 12px;
  }
  .service-dashboard__vehicle-fact-label {
    font-size: 10px;
  }
  .service-dashboard__vehicle-fact-value {
    font-size: 14px;
  }
}

@media (max-width: 460px) {
  .service-dashboard__vehicle-fact-content {
    grid-template-columns:
      1fr;
    gap: 4px;
  }
  .service-dashboard__vehicle-fact-value {
    text-align: left;
  }
}

/* ============================================================
   03.02.01 — VEHICLE PROMO
   Compact conversion card inside service summary.
   ============================================================ */

.service-dashboard__vehicle-promo {
  position: relative;
  min-width: 0;
  min-height: 112px;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgba(145,158,187,.34);
  border-radius: 17px;
  background:
    var(--mm-popup-bg);
  box-shadow:
    var(--mm-item-shadow);
}

.service-dashboard__vehicle-promo-content {
  position: relative;
  z-index: 2;
  width:
    calc(100% - 130px);
  min-width: 0;
  min-height: 112px;
  box-sizing: border-box;
  display: grid;
align-items: center;
  padding: 13px 18px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "badge title action" "badge text action";
  column-gap: 14px;
  row-gap: 0;
}

.service-dashboard__vehicle-promo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  margin-bottom: 0;
  padding:
    0
    10px;
  border: 1px solid rgba(145,158,187,.34);
  border-radius: 999px;
  background:
    var(--mm-popup-bg);
  color:
    var(--mm-status);
  font-family:
    Inter,
    sans-serif;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  grid-area: badge;
  align-self: center;
}

.service-dashboard__vehicle-promo-title {
  display: block;
  max-width: none;
  font-family:
    Inter,
    sans-serif;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -.025em;
  text-transform: uppercase;
  grid-area: title;
  text-align: left;
  justify-self: start;
  align-self: end;
  margin: 0;
}

.service-dashboard__vehicle-promo-text {
  max-width: none;
  margin: 4px 0 0;
  color:
    var(--mm-text-secondary);
  font-family:
    Inter,
    sans-serif;
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 450;
  grid-area: text;
  text-align: left;
  justify-self: start;
  align-self: start;
}

.service-dashboard__vehicle-promo-action {
  min-height: 36px;
  margin-top: 0;
  padding:
    0
    16px;
  border: 0;
  border-radius: 10px;
  background:
    var(--mm-black);
  color:
    #ffffff;
  box-shadow:
    var(--mm-item-shadow);
  font-family:
    Inter,
    sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 650;
  cursor: pointer;
  transition:
    background-color .14s ease;
  grid-area: action;
  align-self: center;
  white-space: nowrap;
}

.service-dashboard__vehicle-promo-action:hover,
.service-dashboard__vehicle-promo-action:focus-visible {
  background:
    var(--mm-black-hover);
}

/* ------------------------------------------------------------
   PROMO VISUAL SLOT
   ------------------------------------------------------------ */

.service-dashboard__vehicle-promo-visual {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 145px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.service-dashboard__vehicle-promo-placeholder {
  position: relative;

  width: 100%;
  height: 100%;
}

.service-dashboard__vehicle-promo-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: right bottom;
}

@media (max-width: 720px) {
  .service-dashboard__vehicle-promo {
    min-height: 180px;
  }
  .service-dashboard__vehicle-promo-content {
    width: 72%;
    min-height: 180px;
    padding: 15px 16px;
  }
  .service-dashboard__vehicle-promo-visual {
    width: 30%;
  }
  .service-dashboard__vehicle-promo-title {
    max-width: 300px;
    font-size: 17px;
  }
  .service-dashboard__vehicle-promo-text {
    max-width: 300px;
  }
  .service-dashboard__vehicle-promo-placeholder {
    width: 100px;
    height: 154px;
  }
}

/* ============================================================
   SERVICE DASHBOARD — RECOMMENDED OILS V2
   ============================================================ */

/* ============================================================
   SERVICE DASHBOARD — RECOMMENDED OILS V2
   Clean monochrome UI
   ============================================================ */

/* RIGHT COLUMN */

/* ============================================================
   SERVICE DASHBOARD — PRICE SUMMARY
   Compact fact grid
   ============================================================ */

.service-dashboard__price {
  min-width: 0;
  margin-top: 0;
  padding:
    0
    16px;
  overflow: hidden;
  border: 1px solid var(--mm-info-border);
  border-radius: var(--mm-radius-medium);
  background: var(--mm-info-surface);
  box-shadow: var(--mm-item-shadow);
}

.service-dashboard__price-purchase {
  min-width: 0;
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 13px 0 4px;
}

.service-dashboard__price-purchase-label {
  color: var(--mm-info-color);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-dashboard__price-purchase-name {
  min-width: 0;
  overflow: hidden;
  color: var(--mm-title-color);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-dashboard__price-purchase-product {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.service-dashboard__price-purchase-logo {
  display: block;
  width: auto;
  height: 20px;
  max-width: 62px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
}


.service-dashboard__price-facts {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
gap: 8px;
  padding: 20px 20px 20px 0;
}

.service-dashboard__price-fact {
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns:
    36px
    minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  padding: 10px 12px 14px;
  background: var(--mm-info-surface-strong);
  border-radius: var(--mm-radius-control);
  border: 1px solid var(--mm-info-border);
  box-shadow:
    0 1px 2px rgba(8, 66, 160, .035),
    0 4px 10px rgba(8, 66, 160, .045);
}

.service-dashboard__price-fact
.catalog-spec__icon {
background:
    var(--mm-info-color);

  color:
    var(--mm-recommend-surface-strong);
}


.service-dashboard__price-fact-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.service-dashboard__price-fact-label {
  color: var(--mm-info-color);
  font-family: var(--font-body);
  font-size: 9.5px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.service-dashboard__price-fact-value {
  min-width: 0;
  color: var(--mm-info-color);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -.015em;
  white-space: nowrap;
}

.service-dashboard__price-explanation {
  margin: 0;
  padding: 0 0 11px;
  border-top: 0;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 450;
}

@media (max-width: 760px) {
  .service-dashboard__price-facts {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .service-dashboard__price-fact {
    padding:
      10px
      12px;
  }

}

@media (max-width: 460px) {
  .service-dashboard__price {
    padding:
      0
      13px;
  }

  .service-dashboard__price-purchase {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .service-dashboard__price-purchase-name {
    white-space: normal;
  }

  .service-dashboard__price-facts {
    grid-template-columns: 1fr;
  }

  .service-dashboard__price-fact,
  .service-dashboard__price-fact:first-child,
  .service-dashboard__price-fact:last-child,
  .service-dashboard__price-fact:nth-child(odd),
  .service-dashboard__price-fact:nth-child(even) {
    min-height: 56px;
    grid-template-columns:
      32px
      minmax(0, 1fr);
    column-gap: 9px;
    padding:
      9px
      12px;
}
}

/* ============================================================
   SERVICE DASHBOARD — CTA
   V2
   ============================================================ */

.service-dashboard__actions {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, .72fr)
    minmax(0, .72fr);
  gap: 8px;
  margin-top: 0;
}

.service-dashboard__action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.service-dashboard__action:hover {
  transform: translateY(-1px);
}

.service-dashboard__action--primary {
  background: var(--mm-cta-primary);
  color: #0b0b0b;
  box-shadow:
    0 7px 16px rgba(0, 0, 0, .055);
}

.service-dashboard__action--primary:hover {
  background: #f2c900;
}

.service-dashboard__action--secondary {
  background: var(--mm-surface-dark);
  color: #fff;
  box-shadow:
    0 7px 16px rgba(0, 0, 0, .075);
}

.service-dashboard__action--secondary:hover {
  background: var(--mm-surface-dark);
}

.service-dashboard__action--tertiary {
  border:
    1px solid
    var(--mm-select-hover-bg);
  background:
    transparent;
  color:
    var(--mm-text-secondary);
  box-shadow:
    none;
}

.service-dashboard__action--tertiary:hover {
  background:
    transparent;
  color:
    var(--mm-title-color);
}

.service-dashboard__disclaimer {
  margin: 10px 2px 0;
  color: var(--mm-text-muted);
  font-family: var(--font-body);
  font-size: 8.5px;
  line-height: 1.4;
  font-weight: 400;
  text-align: center;
}

@media (max-width: 620px) {
  .service-dashboard__actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-dashboard__action {
    transition: none;
  }
}

.service-dashboard__summary {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  align-self: start;
box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 12px;
}

/* SECTION */

.recommended-oils {
  container-type: inline-size;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  flex-direction: column;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 12px;
}

.recommended-oils__head {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 12px;
  padding: 0;
  background: transparent;
  text-align: center;
}

.result__specs .recommended-oils__title {
  display: block;
  margin: 0;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-align: center;
  font-style: normal;
  font-variant: normal;
  font-feature-settings: normal;
  font-variation-settings: normal;
}

.recommended-oils__subtitle {
  display: none;
}

.recommended-oils__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

/* ============================================================
   OIL CARD
   ============================================================ */

.recommended-oil-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 3fr)
    minmax(0, 2fr);

  grid-template-rows:
    minmax(0, 1fr)
    auto;

  align-items: stretch;
  gap: 10px;
  min-width: 0;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid rgba(145,158,187,.34);
  border-radius: var(--mm-radius-medium);
  background: #fff;
  box-shadow: var(--mm-item-shadow);
}

/* ------------------------------------------------------------
   CANISTER
   ------------------------------------------------------------ */

.recommended-oil-row__visual {
  grid-column: 1;
  grid-row: 1 / span 2;

  min-width: 0;
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.recommended-oil-row__canister {
  display: block;
  width: min(84px, 100%);
  height: 96px;
  object-fit: contain;
}

/* ------------------------------------------------------------
   INFORMATION
   ------------------------------------------------------------ */

.recommended-oil-row__information {
  grid-column: 2;
  grid-row: 1;

  align-self: center;

  min-width: 0;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  grid-template-areas:
    "role role"
    "logo title"
    "description description";

  align-content: center;
  align-items: center;

  column-gap: 11px;
  row-gap: 5px;

  padding:
    8px
    12px;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.recommended-oil-row__mobile-head {
  display: contents;
}

.recommended-oil-row__title-line {
  grid-area: title;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.recommended-oil-row__logo {
  grid-area: logo;
  display: block;
  width: auto;
  height: 27px;
  max-width: 82px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
}

.recommended-oil-row__name {
  min-width: 0;
  color: var(--mm-title-color);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

.recommended-oil-row__description {
  grid-area: description;
  display: block;
  margin: 5px 0 6px;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 400;
  overflow: visible;
  white-space: normal;
  -webkit-line-clamp: unset;
}

/* TECHNICAL FACTS */

.recommended-oil-row__facts {
  grid-column: 2;
  grid-row: 2;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-top: 10px;
}

.recommended-oil-row__fact {
  min-width: 0;
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--mm-control-border);
  border-radius: 9px;
  background: var(--mm-control-surface);
  white-space: nowrap;
}

.recommended-oil-row__fact-label,
.recommended-oil-row__fact-value {
  font-family: var(--font-body);
  line-height: 1;
  white-space: nowrap;
}

.recommended-oil-row__fact-label {
  color: var(--mm-text-muted);
  font-size: 8px;
  font-weight: 500;
}

.recommended-oil-row__fact-value {
  color: var(--mm-text-secondary);
  font-size: 8px;
  font-weight: 600;
}

/* ------------------------------------------------------------
   COMMERCE
   Reference layout:
   role
   price
   needed
   total
   CTA
   free labor
   labor
   ------------------------------------------------------------ */

.recommended-oil-row__commerce {
  grid-column: 3;
  grid-row: 1 / span 2;

  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 7px 6px 16px;
  border: 0;
  border-left:
    1px solid
    var(--mm-border);
  border-radius: 0;
  background:
    transparent;
  box-shadow:
    none;
}

/* ROLE */

.recommended-oil-row__role {
  grid-area: role;
  min-height: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  padding: 0;
  color:
    var(--mm-text-secondary);
  font-family:
    var(--font-body);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform:
    uppercase;
}

.recommended-oil-row__role-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--mm-role-alternative-color);
  color:
    var(--mm-text-secondary);
  font-size: 8px;
  line-height: 1;
}

.recommended-oil-row__role--primary
.recommended-oil-row__role-icon {
  background: var(--mm-role-primary-color);
  color:
    #ffffff;
}

/* ------------------------------------------------------------
   COMMERCIAL METRICS
   No individual cards.
   ------------------------------------------------------------ */

.recommended-oil-row__commerce-line {
  min-width: 0;
  display: grid;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border: 0;
  border-radius: 0;
  background:
    transparent;
  grid-template-columns: minmax(0, 1fr) max-content;
  border-bottom: 1px solid var(--mm-border);
}

.recommended-oil-row__commerce-label {
  min-width: 0;
  color: var(--mm-text-secondary);
  font-family:
    var(--font-body);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}

.recommended-oil-row__commerce-value {
  min-width: 0;
  color:
    var(--mm-text);
  font-family:
    var(--font-mono);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

/* PRICE PER LITER */

.recommended-oil-row__commerce-line--liter {
  order: 2;
  margin-bottom: 0;
}

.recommended-oil-row__commerce-line--liter
.recommended-oil-row__commerce-value {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
}

/* NEEDED */

.recommended-oil-row__commerce-line--volume {
  order: 3;
  margin-bottom: 0;
}

/* TOTAL */

.recommended-oil-row__commerce-line--total {
  order: 4;
  margin: 0;
  border-bottom: 0;
}

.recommended-oil-row__commerce-line--total
.recommended-oil-row__commerce-value {
  font-size: 11px;
  font-weight: 700;
}

/* SELECT */

.recommended-oil-row__select {
  order: 6;
  width: 100%;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding:
    0
    13px;
  border: 0;
  border-radius:
    var(--mm-radius-control);
  background:
    var(--mm-black);
  color:
    #ffffff;
  font-family:
    var(--font-body);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transition:
    background .18s ease,
    transform .18s ease;
}

.recommended-oil-row__select:hover {
  background:
    var(--mm-black-hover);
  transform:
    translateY(-1px);
}

.recommended-oil-row__select[aria-pressed="true"] {
  background:
    var(--mm-select-selected-bg);
  color:
    var(--mm-select-hover-color);
  transform: none;
}

/* ------------------------------------------------------------
   FREE LABOR
   The only inner soft card in commerce.
   ------------------------------------------------------------ */

.recommended-oil-row__free-labor {
  order: 5;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding: 6px 8px;
  border: 1px solid var(--mm-info-border);
  border-radius: 11px;
  background: var(--mm-info-surface);
}

.recommended-oil-row__free-labor-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--mm-info-color);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.recommended-oil-row__free-labor-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recommended-oil-row__free-labor-text strong {
  color: var(--mm-info-color);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}

.recommended-oil-row__free-labor-text small {
  color: var(--mm-info-color);
  font-size: 8px;
  line-height: 1.25;
}

@container (max-width: 560px) {
  .recommended-oil-row {
    grid-template-columns:
      100px
      minmax(0, 1fr);
    align-items: stretch;
  }

  .recommended-oil-row__visual {
    grid-column: 1;
    grid-row: 1;
    min-height: 130px;
  }

    .recommended-oil-row__information {
    grid-column: 2;
    grid-row: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
  }

      .recommended-oil-row__mobile-head {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
    margin-bottom: 7px;
  }

  .recommended-oil-row__mobile-head
  .recommended-oil-row__logo {
    display: block;

    flex:
      0
      1
      64px;

    width: auto;
    height: 20px;
    max-width: 64px;

    object-fit: contain;
    object-position: left center;
  }

  .recommended-oil-row__mobile-head
  .recommended-oil-row__role {
    flex:
      0
      1
      auto;

    min-width: 0;
    margin: 0;
  }

  .recommended-oil-row__facts {
    grid-column: 1 / -1;
    grid-row: 2;

    margin-top: 2px;
    padding:
      0
      7px;
  }

  .recommended-oil-row__commerce {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
  .recommended-oil-row__role,
  .recommended-oil-row__free-labor,
  .recommended-oil-row__select {
    grid-column: 1 / -1;
  }
  .recommended-oil-row__commerce-line--liter {
    display: flex;
  }
}

@container (max-width: 470px) {
  .recommended-oil-row {
    grid-template-columns:
      82px
      minmax(0, 1fr);
    gap: 7px;
    padding: 7px;
  }
  .recommended-oil-row__visual {
    min-height: 112px;
    padding: 7px;
  }
  .recommended-oil-row__canister {
    width: min(76px, 100%);
    height: 96px;
  }
  .recommended-oil-row__information {
    padding: 10px;
  }
  .recommended-oil-row__logo {
    height: 21px;
    max-width: 62px;
  }
  .recommended-oil-row__name {
    font-size: 12px;
  }
  .recommended-oil-row__description {
    margin: 6px 0 8px;
    font-size: 9.5px;
  }
  .recommended-oil-row__commerce {
    padding: 8px;
  }
  .recommended-oil-row__commerce-line {
    min-height: 30px;
  }
  .recommended-oil-row__select {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recommended-oil-row__select {
    transition: none;
  }
}

/* ============================================================
   QUICK CONTACT DIALOG — V2
   Fast-contact flow, separate from order flow.
   ============================================================ */

body.quick-contact-dialog-open {
  overflow: hidden;
}

.quick-contact-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
}

.quick-contact-dialog[hidden] {
  display: none;
}

.quick-contact-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .28);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition:
    opacity .18s ease;
}

.quick-contact-dialog__panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  min-height: 300px;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-medium);
  background: #fff;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .14);
  opacity: 0;
  transform:
    translateY(8px)
    scale(.99);
  transition:
    opacity .18s ease,
    transform .18s ease;
}

.quick-contact-dialog--open
.quick-contact-dialog__backdrop {
  opacity: 1;
}

.quick-contact-dialog--open
.quick-contact-dialog__panel {
  opacity: 1;
  transform: none;
}

.quick-contact-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: var(--mm-surface-soft);
  color: var(--mm-text);
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
}

.quick-contact-dialog__content {
  min-height: 300px;
  padding:
    64px
    28px
    28px;
}

@media (max-width: 620px) {
  .quick-contact-dialog {
    padding: 10px;
  }
  .quick-contact-dialog__panel {
    width: 100%;
    min-height: 280px;
  }
  .quick-contact-dialog__content {
    min-height: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick-contact-dialog__backdrop,
  .quick-contact-dialog__panel {
    transition: none;
  }
}

/* ============================================================
   PRICE EXPLANATION — V2
   Oil volume / purchase volume explanation.
   ============================================================ */

.service-dashboard__price-explanation {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 0 11px;
  border-top: 0;
  background: transparent;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
}

@media (max-width: 620px) {
  .service-dashboard__price-explanation {
    margin-top: 0;
    padding-top: 0;
  }
}

/* ============================================================
   OTHER OILS — BRAND FILTER
   V2
   ============================================================ */

.oil-brand-filter {
  position: relative;
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid var(--mm-control-border);
  border-radius: var(--mm-radius-medium);
  background: var(--mm-control-surface);
  box-shadow: var(--mm-item-shadow);
}

.oil-brand-filter__track {
  display: flex;
  align-items: stretch;
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 7px;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(0, 0, 0, .14)
    transparent;
}

.oil-brand-filter__track::-webkit-scrollbar {
  height: 4px;
}

.oil-brand-filter__track::-webkit-scrollbar-track {
  background: transparent;
}

.oil-brand-filter__track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background:
    rgba(0, 0, 0, .14);
}

.oil-brand-filter__item {
  min-width: 104px;
  min-height: 66px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  grid-template-rows:
    29px
    auto;
  align-items: center;
  column-gap: 7px;
  row-gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(145,158,187,.34);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--mm-item-shadow);
  color: var(--mm-text);
  font-family: var(--font-body);
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.oil-brand-filter__item:hover {
  transform: translateY(-1px);
  border-color:
    rgba(0, 0, 0, .18);
  background: #fff;
}

.oil-brand-filter__item--active {
  border-color:
    rgba(0, 0, 0, .42);
  background: #fff;
  box-shadow: var(--mm-item-shadow);
}

.oil-brand-filter__logo {
  grid-column: 1 / -1;
  justify-self: center;
  display: block;
  width: auto;
  height: 25px;
  max-width: 82px;
  object-fit: contain;
  filter: none;
  box-shadow: none;
}

.oil-brand-filter__name {
  min-width: 0;
  overflow: hidden;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.oil-brand-filter__count {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background:
    rgba(0, 0, 0, .055);
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}

.oil-brand-filter__item--active
.oil-brand-filter__count {
  background:
    rgba(0, 0, 0, .075);
  color: var(--mm-text);
}

/* Preserve filtering behaviour */
.oil-choice .oil-choice-row--catalog[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .oil-brand-filter {
    margin-bottom: 10px;
    padding: 8px;
  }
  .oil-brand-filter__track {
    gap: 7px;
    margin-right: -6px;
    padding-right: 9px;
  }
  .oil-brand-filter__item {
    min-width: 92px;
    min-height: 59px;
    grid-template-rows:
      24px
      auto;
    padding: 7px 8px;
    border-radius: 11px;
  }
  .oil-brand-filter__logo {
    height: 21px;
    max-width: 70px;
  }
  .oil-brand-filter__name {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oil-brand-filter__item {
    transition: none;
  }
}

/* ============================================================
   OTHER OILS — TITLE TYPOGRAPHY
   V2
   ============================================================ */

.oil-choice-row__name {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--mm-text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: none;
}

/*
 * Legacy .result__specs span must not turn elements of the
 * V2 oil title line into technical glass pills.
 */
.oil-choice-row__title-line > span {
  border: 0;
  box-shadow: none;
  font-family: var(--font-body);
}

/* Text brand fallback — used when SVG logo is unavailable */

/*
 * Viscosity remains a useful technical badge,
 * but uses the normal UI font instead of the old mono font.
 */

/* ============================================================
   OTHER OILS — BRAND FILTER CONTROLS
   V2
   ============================================================ */

.oil-brand-filter__controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.oil-brand-filter__control {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--mm-border);
  border-radius: 11px;
  background: var(--mm-surface-soft);
  color: var(--mm-text);
  box-shadow: var(--mm-item-shadow);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    opacity .18s ease;
}

.oil-brand-filter__control:hover:not(:disabled) {
  background: #fff;
  border-color:
    rgba(0, 0, 0, .18);
  transform: translateY(-1px);
}

.oil-brand-filter__control:disabled {
  opacity: .28;
  cursor: default;
}

@media (max-width: 620px) {
  .oil-brand-filter__control {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oil-brand-filter__control {
    transition: none;
  }
}

/* ============================================================
   OTHER OILS — V2
   Canonical component
   ============================================================ */

/* ---------- HEADER ---------- */

.oil-choice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 11px;
  padding: 0 5px;
}

.oil-choice__heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.oil-choice__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--mm-section-title-size);
  line-height: var(--mm-section-title-line-height);
  font-weight: var(--mm-section-title-weight);
  letter-spacing: var(--mm-section-title-letter-spacing);
}

.oil-choice__count {
  min-width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border: 1px solid var(--mm-border);
  border-radius: 999px;
  background: var(--mm-surface-soft);
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
}

.oil-choice__hint {
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 400;
}

/* ---------- VIEWPORT ---------- */

.oil-choice__viewport {
  position: relative;
  overflow: clip;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Светлый нижний туман: показывает продолжение списка */

.oil-choice__viewport::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
  left: 0;
  right: 7px;
  bottom: 0;
  height: 38px;
  border-radius: 0 0 17px 17px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--mm-surface-soft)
  );
}

/* ---------- VERTICAL SCROLL ---------- */

.oil-choice__list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 9px;
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1px 7px 26px 1px;
  overscroll-behavior-y: auto;
  overscroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(73,93,95,.24)
    transparent;
}

.oil-choice__list::-webkit-scrollbar {
  width: 5px;
}

.oil-choice__list::-webkit-scrollbar-track {
  background: transparent;
}

.oil-choice__list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(73,93,95,.22);
}

/* ---------- ROW ---------- */

.oil-choice .oil-choice-row--catalog {
  position: relative;
  display: grid;
  grid-template-columns:
    96px
    minmax(0,1fr)
    250px;
  grid-template-areas:
    "media info commerce"
    "media facts commerce";
  align-items: stretch;
  gap: 14px;
  min-height: 154px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid var(--mm-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--mm-item-shadow);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.oil-choice .oil-choice-row--catalog:hover {
  transform: translateY(-1px);
  border-color: rgba(24,38,39,.15);
  box-shadow:
    0 9px 24px rgba(26,42,43,.07);
}

/* ---------- CANISTER ---------- */

.oil-choice-row--catalog
.oil-choice-row__media {
  grid-area: media;
  width: 96px;
  height: 100%;
  min-height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
}

.oil-choice-row--catalog
.oil-choice-row__image {
  display: block;
  width: 100%;
  max-width: 86px;
  max-height: 118px;
  object-fit: contain;
  filter: none;
}

/* ---------- PRODUCT INFO ---------- */

.oil-choice-row--catalog
.oil-choice-row__info {
  grid-area: info;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.oil-choice-row__title-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.oil-choice-row__brand-logo {
  display: block;
  width: auto;
  height: 25px;
  max-width: 72px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
}

.oil-choice-row__brand-text {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.oil-choice-row--catalog
.oil-choice-row__name {
  min-width: 0;
  display: block;
  margin: 0;
  overflow: visible;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -.012em;
  -webkit-line-clamp: unset;
}

/* ---------- VISCOSITY ---------- */

.oil-choice-row__viscosity {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 8px;
  border: 1px solid var(--mm-border);
  border-radius: 11px;
  background: var(--mm-surface-soft);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- DESCRIPTION ---------- */

.oil-choice-row__description {
  display: block;
  margin: 8px 0 9px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  white-space: normal;
}

/* ---------- EXPERT INSIGHT ---------- */

.oil-choice-row__insight {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin: -2px 0 8px;
  padding: 5px 8px;
  border: 1px solid var(--mm-control-border);
  border-radius: 11px;
  background: var(--mm-control-surface);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1.3;
  font-weight: 400;
}

.oil-choice-row__insight-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 6px;
  background: rgba(24,38,39,.06);
  color: var(--text-main);
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
}

/* ---------- INLINE TECHNICAL CHAIN ---------- */

.oil-choice-row--catalog
.oil-choice-row__facts {
  grid-area: facts;

  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 0;
  overflow: hidden;
  align-self: flex-start;
  border: 1px solid var(--mm-control-border);
  border-radius: 11px;
  background: var(--mm-control-surface);
}

.oil-choice-row--catalog
.oil-choice-row__fact {
  position: relative;
  width: auto;
  min-width: 0;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
}

.oil-choice-row--catalog
.oil-choice-row__fact + .oil-choice-row__fact {
  border-left:
    1px solid rgba(24,38,39,.08);
}

.oil-choice-row--catalog
.oil-choice-row__fact-label {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 7px;
  line-height: 1;
  font-weight: 400;
}

.oil-choice-row--catalog
.oil-choice-row__fact-value {
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 8px;
  line-height: 1;
  font-weight: 400;
}

/* ---------- COMMERCIAL COLUMN ---------- */

.oil-choice-row__commerce {
  grid-area: commerce;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 18px;
  border-left:
    1px solid rgba(24,38,39,.10);
}

.oil-choice-row__metric {
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    max-content;
  align-items: center;
  gap: 12px;
  min-height: 28px;
  padding: 4px 0;
  border-bottom:
    1px solid rgba(24,38,39,.075);
}

.oil-choice-row__metric-label {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 400;
  white-space: nowrap;
}

.oil-choice-row__metric-value {
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 400;
  white-space: nowrap;
}

.oil-choice-row__metric--liter
.oil-choice-row__metric-value {
  font-size: 12px;
  font-weight: 400;
}

.oil-choice-row__metric--total {
  border-bottom: 0;
}

.oil-choice-row__metric--total
.oil-choice-row__metric-value {
  font-size: 13px;
  font-weight: 400;
}

/* ---------- ACTION ---------- */

.oil-choice-row--catalog
.oil-choice-row__action {
  width: 100%;
  display: flex;
  align-items: flex-end;
  margin-top: auto;
  padding-top: 10px;
}

.oil-choice-row--catalog
.oil-choice-row__select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 0 12px;
  border:
    1px solid
    var(--mm-surface-dark);
  border-radius: 11px;
  background:
    var(--mm-surface-dark);
  color: #fff;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 650;
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.oil-choice-row--catalog
.oil-choice-row__select::before {
  display: none;
}

.oil-choice-row--catalog
.oil-choice-row__select:hover {
  transform: translateY(-1px);
  border-color:
    var(--mm-cta-primary);
  background:
    var(--mm-cta-primary);
  color: #000;
}

.oil-choice-row--catalog
.oil-choice-row__select:active {
  transform: translateY(0);
}

/* ---------- SELECTED ---------- */

.oil-choice-row--catalog.catalog-product--selected {
  border-color: rgba(24,38,39,.18);
  background: #fff;
  box-shadow:
    var(--mm-selected-shadow);
}

.oil-choice-row--catalog.catalog-product--selected
.oil-choice-row__select {
  border-color: var(--mm-select-selected-bg);
  background: var(--mm-select-selected-bg);
  color: var(--mm-select-hover-color);
}

.oil-choice-row--catalog.catalog-product--selected
.oil-choice-row__select:hover {
  border-color: var(--mm-select-selected-bg);
  background: var(--mm-select-selected-bg);
  color: var(--mm-select-hover-color);
  transform: none;
}

.oil-choice-row--catalog.catalog-product--selected:hover {
  box-shadow:
    var(--mm-selected-shadow);
}

@media (max-width: 900px) {
  .oil-choice .oil-choice-row--catalog {
    grid-template-columns:
      88px
      minmax(0,1fr)
      220px;
  }
  .oil-choice-row--catalog
  .oil-choice-row__media {
    width: 88px;
  }
}

@media (max-width: 620px) {
  .oil-choice__list {
    max-height: 440px;
    padding-right: 4px;
  }
  .oil-choice .oil-choice-row--catalog {
    grid-template-columns:
      70px
      minmax(0,1fr);
    grid-template-areas:
      "media info"
      "facts facts"
      "commerce commerce";
    gap: 10px;
    min-height: 0;
    padding: 10px;
  }
  .oil-choice-row--catalog
  .oil-choice-row__media {
    width: 70px;
    min-height: 104px;

    padding-top:
      25px;
  }
  .oil-choice-row--catalog
  .oil-choice-row__image {
    max-width: 65px;
    max-height: 74px;
  }

  .oil-choice-row--catalog
  .oil-choice-row__brand-logo {
    position: absolute;

    top: 13px;
    left: 13px;

    width: 64px;
    height: 18px;
    max-width: 64px;

    object-fit: contain;
    object-position: center;

    z-index: 2;
  }
  .oil-choice-row__commerce {
    padding:
      10px 0 0;
    border-left: 0;
    border-top:
      1px solid rgba(24,38,39,.10);
  }
  .oil-choice-row__metric {
    min-height: 26px;
  }
  .oil-choice-row--catalog
  .oil-choice-row__action {
    padding-top: 8px;
  }
}

/* ============================================================
   END OTHER OILS — V2
   ============================================================ */
/* FILTER AUTO-SCROLL OFFSET */

@media (max-width: 620px) {
}

/* ============================================================
   FILTER CHOICE V2
   Clean catalog list.
   Single owner: styles-v2.css
   ============================================================ */

.filter-choice {
  position: relative;
  box-sizing: border-box;
  margin-top: 18px;
  padding: 0;
  overflow: hidden;
  scroll-margin-top: 28px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.filter-choice + .filter-choice {
  margin-top: 16px;
}

/* ---------- HEADER ---------- */

.filter-choice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 11px;
  padding: 0 5px;
}

.filter-choice__heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.filter-choice__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.018em;
}

.filter-choice__title::before {
  content: none;
}

.filter-choice__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 25px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: var(--mm-surface-soft);
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
}


/* ============================================================
   FILTER CHOICE — ADAPTIVE GRID
   Compact service consumables
   ============================================================ */

.filter-choice__service {
  flex: 0 0 auto;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 500;
  white-space: nowrap;
}

.filter-choice__list {
  min-width: 0;
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.filter-choice-row {
  min-width: 0;
  min-height: 100%;
  display: grid;
  grid-template-rows:
    96px
    minmax(0, 1fr)
    auto
    auto;
  align-content: start;
  overflow: hidden;
  padding: 10px;
  border:
    1px solid
    var(--mm-control-border);
  border-radius:
    var(--mm-radius-medium);
  background: #fff;
  box-shadow:
    var(--mm-item-shadow);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.filter-choice-row:hover {
  transform: translateY(-1px);
}

.filter-choice-row__media {
  min-width: 0;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  border-radius:
    var(--mm-radius-control);
  background:
    #fff;
}

.filter-choice-row__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 88px;
  max-height: 82px;
  object-fit: contain;
}

.filter-choice-row__info {
  min-width: 0;
  padding:
    11px
    2px
    8px;
}

.filter-choice-row__brand {
  margin-bottom: 4px;
  overflow: hidden;
  color:
    var(--mm-text-muted);
  font-family:
    var(--font-body);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.filter-choice-row__name {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color:
    var(--mm-title-color);
  font-family:
    var(--font-body);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -.01em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.filter-choice-row__price {
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  align-items: end;
  gap:
    4px
    10px;
  margin-top: 2px;
  padding:
    10px
    2px
    9px;
  border-top:
    1px solid
    var(--mm-border);
}

.filter-choice-row__price-label {
  align-self: center;
  color:
    var(--mm-text-muted);
  font-family:
    var(--font-body);
  font-size: 8.5px;
  line-height: 1.2;
  font-weight: 500;
}

.filter-choice-row__total {
  color:
    var(--mm-title-color);
  font-family:
    var(--font-body);
  font-size: 14px;
  line-height: 1.1;
  font-weight: 700;
  white-space: nowrap;
}

.filter-choice-row__total--request {
  color:
    var(--mm-text-secondary);
  font-size: 11px;
}

.filter-choice-row__work {
  grid-column: 1 / -1;
  color:
    var(--mm-text-muted);
  font-family:
    var(--font-body);
  font-size: 8.5px;
  line-height: 1.3;
  font-weight: 450;
}

.filter-choice-row__action {
  min-width: 0;
  padding-top: 2px;
}

.filter-choice-row
.filter-choice-row__select {
  width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:
    0
    14px;
  border: 0;
  border-radius:
    var(--mm-radius-control);
  background:
    var(--mm-surface-dark);
  color: #fff;
  font-family:
    var(--font-body);
  font-size: 10px;
  line-height: 1;
  font-weight: 650;
  cursor: pointer;
  transition:
    transform .16s ease,
    background-color .16s ease,
    color .16s ease;
}

.filter-choice-row
.filter-choice-row__select:hover {
  background:
    var(--mm-cta-primary);
  color:
    #000;
  transform:
    translateY(-1px);
}

.filter-choice-row
.filter-choice-row__select:active {
  transform:
    translateY(0);
}

.filter-choice-row.catalog-product--selected {
  border-color:
    rgba(67,45,176,.32);
  box-shadow:
    0 0 0 1px rgba(67,45,176,.06),
    var(--mm-item-shadow);
}

.filter-choice-row.catalog-product--selected
.filter-choice-row__select {
  background:
    var(--mm-select-selected-bg);
  color:
    var(--mm-select-hover-color);
}

.filter-choice-row.catalog-product--selected
.filter-choice-row__select:hover {
  background:
    var(--mm-select-selected-bg);
}

.filter-choice__empty {
  padding: 16px;
  border:
    1px solid
    var(--mm-control-border);
  border-radius:
    var(--mm-radius-medium);
  background:
    var(--mm-control-surface);
  color:
    var(--mm-text-secondary);
  font-family:
    var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}


/* TABLET */

@media (max-width: 980px) {
  .filter-choice__list {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .filter-choice-row {
    grid-template-rows:
      100px
      minmax(0, 1fr)
      auto
      auto;
  }

  .filter-choice-row__media {
    height: 100px;
  }
}


/* NARROW TABLET */

@media (max-width: 760px) {
  .filter-choice__list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* MOBILE */

@media (max-width: 620px) {
  .filter-choice__service {
    display: none;
  }

  .filter-choice__list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .filter-choice-row {
    grid-template-columns:
      94px
      minmax(0, 1fr);
    grid-template-rows:
      auto
      auto
      auto;
    grid-template-areas:
      "media info"
      "media price"
      "action action";
    column-gap: 11px;
    padding: 9px;
  }

  .filter-choice-row__media {
    grid-area: media;
    width: 94px;
    height: 94px;
    padding: 7px;
  }

  .filter-choice-row__image {
    max-width: 84px;
    max-height: 82px;
  }

  .filter-choice-row__info {
    grid-area: info;
    padding:
      4px
      0
      5px;
  }

  .filter-choice-row__price {
    grid-area: price;
    align-self: end;
    padding:
      8px
      0
      4px;
  }

  .filter-choice-row__action {
    grid-area: action;
    padding-top: 9px;
  }

  .filter-choice-row
  .filter-choice-row__select {
    min-height: 40px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .filter-choice-row,
  .filter-choice-row
  .filter-choice-row__select {
    transition: none;
  }
}































@media (max-width: 820px) {





}

@media (max-width: 620px) {
  .filter-choice {
  scroll-margin-top: 18px;
  padding: 14px;
  border-radius: 20px;
}
  .filter-choice + .filter-choice {
    margin-top: 12px;
  }
  .filter-choice__head {
    gap: 10px;
    margin-bottom: 10px;
    padding: 0 2px;
  }
  .filter-choice__title {
    font-size: 17px;
  }







}

@media (prefers-reduced-motion: reduce) {
}

/* ============================================================
   CATALOG RESULT — PAGE FLOW V2
   Hero / Catalog / Calculator
   Single owner: styles-v2.css
   ============================================================ */

.catalog-result {
  width: 100%;
  margin-top: 28px;
  text-align: left;
}

/* ============================================================
   01 — VEHICLE / SERVICE / RECOMMENDED
   ============================================================ */

.catalog-result__hero {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ============================================================
   02 — OTHER OILS / FILTER CATALOG
   ============================================================ */

.catalog-result__catalog {
  position: relative;
  margin-top: 22px;
  padding: 22px;
  border: var(--mm-section-border);
  border-radius: 24px;
  background: rgb(255, 255, 255);
  box-shadow: 0 10px 20px rgba(165,177,202,.3), 0 3px 6px rgba(165,177,202,.3);
  transition: all .2s ease-in;}

/*
 * Компоненты внутри catalog уже имеют
 * собственную визуальную структуру.
 *
 * Здесь нужен только вертикальный rhythm,
 * а не дополнительные рамки.
 */

.catalog-result__catalog
> .oil-choice:first-child,
.catalog-result__catalog
> .filter-choice:first-child {
  margin-top: 0;
}

/* Calculator остаётся отдельной третьей стадией */

.catalog-result
> .catalog-calculator {
  margin-top: 22px;
}

@media (max-width: 620px) {
  .catalog-result {
    margin-top: 20px;
  }
  .catalog-result__catalog {
    margin-top: 16px;
    padding: 14px;
    border-radius: 20px;
  }
  .catalog-result
  > .catalog-calculator {
    margin-top: 16px;
  }
}

/* ============================================================
   END CATALOG RESULT — PAGE FLOW V2
   ============================================================ */

/* ============================================================
   CALCULATOR — V2
   Final selected service package.
   Single owner: styles-v2.css
   ============================================================ */

.catalog-calculator {
  position: relative;
  margin-top: 24px;
  padding: 24px;
  box-sizing: border-box;
  border: var(--mm-section-border);
  border-radius:
    27px 21px 29px 20px;
  background: rgb(255, 255, 255);
  box-shadow: 0 10px 20px rgba(165,177,202,.3), 0 3px 6px rgba(165,177,202,.3);
  scroll-margin-top: 28px;
  transition: all .2s ease-in;}

.catalog-calculator::before,
.catalog-calculator::after {
  content: none;
}

/* ============================================================
   HEAD
   ============================================================ */

.catalog-calculator__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.catalog-calculator__heading {
  min-width: 0;
}

.catalog-calculator__kicker {
  margin-bottom: 6px;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.catalog-calculator__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--mm-section-title-size);
  font-weight: var(--mm-section-title-weight);
  line-height: var(--mm-section-title-line-height);
  letter-spacing: var(--mm-section-title-letter-spacing);
}

.catalog-calculator__subtitle {
  margin: 8px 0 0;
  max-width: 620px;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

/* ---------- STATUS ---------- */

.catalog-calculator__status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--mm-border);
  border-radius: 999px;
  background: var(--mm-surface-soft);
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
}

.catalog-calculator__status::before {
  content: none;
}

/* ============================================================
   EMPTY
   ============================================================ */

.catalog-calculator__empty {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-medium);
  background: var(--mm-surface-soft);
}

.catalog-calculator__empty-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: #fff;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  box-shadow: var(--mm-item-shadow);
}

.catalog-calculator__empty-text {
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

/* ============================================================
   GROUPS
   ============================================================ */

.catalog-calculator__group {
  margin-top: 14px;
  padding: 7px;
  border: 1px solid var(--mm-control-border);
  border-radius: var(--mm-radius-medium);
  background: var(--mm-control-surface);
}

.catalog-calculator__group--works {
  margin-top: 10px;
}

.catalog-calculator__group--filter-gate {
  margin-top: 10px;
}

.catalog-calculator__filter-actions {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(180px, 1fr)
    );
  gap: 7px;
  margin-top: 7px;
}

.catalog-calculator__filter-confirm,
.catalog-calculator__filter-other {
  min-height: 40px;
  padding:
    0
    14px;
  border-radius:
    var(--mm-radius-control);
  font-family:
    var(--font-body);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform .16s ease,
    background-color .16s ease,
    color .16s ease,
    border-color .16s ease;
}

.catalog-calculator__filter-confirm {
  border: 0;
  background:
    var(--mm-cta-primary);
  color:
    #111;
}

.catalog-calculator__filter-other {
  border:
    1px solid
    var(--mm-control-border);
  background:
    #fff;
  color:
    var(--mm-text-secondary);
}

.catalog-calculator__filter-confirm:hover,
.catalog-calculator__filter-other:hover {
  transform:
    translateY(-1px);
}

.catalog-calculator__filter-confirm:active,
.catalog-calculator__filter-other:active {
  transform:
    translateY(0);
}


.catalog-calculator__group-title {
  padding: 6px 9px 9px;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.catalog-calculator__rows {
  display: grid;
  gap: 6px;
}

/* ---------- MATERIAL / WORK ROW ---------- */

.catalog-calculator__row {
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    150px;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--mm-border);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--mm-item-shadow);
}

.catalog-calculator__item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
}

.catalog-calculator__label {
  margin-bottom: 3px;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.2;
}

.catalog-calculator__name {
  min-width: 0;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.catalog-calculator__meta {
  margin-top: 4px;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
}

/* ---------- PRICE COLUMN ---------- */

.catalog-calculator__price {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding: 10px 14px;
  border-left: 1px solid var(--mm-border);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  text-align: right;
}

.catalog-calculator__price--request {
  color: var(--mm-text-secondary);
}

.catalog-calculator__price--free {
  color: var(--text-main);
}

/* ---------- WORK ROW ---------- */

.catalog-calculator__row--work {
  grid-template-columns:
    minmax(0,1fr)
    150px;
  min-height: 48px;
}

.catalog-calculator__work-name {
  padding: 10px 14px;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
}

/* ============================================================
   SUMMARY
   ============================================================ */

.catalog-calculator__summary {
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(250px, .72fr);
  gap: 10px;
  margin-top: 14px;
  padding: 7px;
  border: 1px solid var(--mm-control-border);
  border-radius: var(--mm-radius-medium);
  background: var(--mm-control-surface);
}

.catalog-calculator__breakdown {
  display: grid;
  align-content: center;
  padding: 5px 7px;
}

.catalog-calculator__breakdown-row {
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    auto;
  align-items: center;
  gap: 18px;
  min-height: 38px;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
}

.catalog-calculator__breakdown-row
+ .catalog-calculator__breakdown-row {
  border-top: 1px solid var(--mm-border);
}

.catalog-calculator__breakdown-row strong {
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  text-align: right;
}

/* ---------- GRAND TOTAL ---------- */

.catalog-calculator__grand {
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    auto;
  align-items: center;
  gap: 18px;
  min-height: 82px;
  padding: 14px 16px;
  border: 1px solid var(--mm-border);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--mm-item-shadow);
}

.catalog-calculator__grand-label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.catalog-calculator__grand-label span {
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
}

.catalog-calculator__grand-label small {
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.3;
}

.catalog-calculator__grand-value {
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: clamp(27px,3.2vw,36px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
}

/* ---------- NOTE ---------- */

.catalog-calculator__note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 3px 7px 1px;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
}

/* ============================================================
   FINAL CTA
   ============================================================ */

.catalog-calculator__actions {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items: stretch;

  gap: 12px;

  margin-top: 12px;
}


.catalog-calculator__booking {
  width: 100%;
  min-height: 50px;
  margin-top: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 13px;
  background: var(--mm-cta-primary);
  color: #111;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: none;
  transition:
    transform .16s ease,
    filter .16s ease;
}

.catalog-calculator__booking:disabled {
  opacity: .46;
  cursor: not-allowed;
  transform: none;
  filter: saturate(.55);
}.catalog-calculator__booking:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(.985);
}.catalog-calculator__booking:not(:disabled):active {
  transform: translateY(0);
}

@media (max-width: 620px) {
  .catalog-calculator {
    margin-top: 18px;
    padding: 14px;
    border-radius:
      22px 17px 24px 16px;
    scroll-margin-top: 18px;
  }
  .catalog-calculator__head {
    display: grid;
    gap: 11px;
    margin-bottom: 14px;
  }
  .catalog-calculator__title {
    font-size: var(--mm-section-title-size);
  }
  .catalog-calculator__status {
    justify-self: start;
  }
  .catalog-calculator__group {
    padding: 6px;
    border-radius: 16px;
  }
  .catalog-calculator__row,
  .catalog-calculator__row--work {
    grid-template-columns: 1fr;
  }
  .catalog-calculator__price {
    min-height: 38px;
    justify-content: flex-start;
    padding:
      8px 12px;
    border-left: 0;
    border-top: 1px solid var(--mm-border);
    text-align: left;
  }
  .catalog-calculator__summary {
    grid-template-columns: 1fr;
    padding: 6px;
    border-radius: 16px;
  }
  .catalog-calculator__grand {
    min-height: 74px;
    padding: 12px;
    border-radius: 12px;
  }
  .catalog-calculator__grand-value {
    font-size: 28px;
  }
  .catalog-calculator__booking {
    min-height: 48px;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-calculator__booking {
    transition: none;
  }
}

/* ============================================================
   END CALCULATOR — V2
   ============================================================ */

/* ============================================================
   VEHICLE HERO — FUNCTIONAL OWNERSHIP
   Single owner: styles-v2.css
   ============================================================ */

.vehicle-hero__visual[hidden] {
  display: none;
}

/* ============================================================
   VEHICLE PICKER
   Single owner: styles-v2.css
   ============================================================ */

.vehicle-picker {
  position: relative;
  overflow: visible;
  margin-top: 28px;
  padding: 26px;
  border:
    5px solid #fff;
  border-radius:
    var(--mm-radius-large);
  background:
    var(--mm-info-surface);
  box-shadow:
    0 10px 20px rgba(165,177,202,.3),
    0 3px 6px rgba(165,177,202,.3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    all .2s ease-in;
}

.vehicle-picker::before {
  display: none;
}

.vehicle-picker__head {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 18px;
  text-align: left;
}

.vehicle-picker__heading {
  min-width: 0;
}

.vehicle-picker__kicker {
  margin-bottom: 5px;
  color:
    var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vehicle-picker__title-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.vehicle-picker__title {
  margin: 0;
  font-family:
    var(--font-body);
  font-size: var(--mm-section-title-size);
  line-height: var(--mm-section-title-line-height);
  font-weight: var(--mm-section-title-weight);
  letter-spacing: var(--mm-section-title-letter-spacing);
}

.vehicle-picker__brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.vehicle-picker__brand-logo {
  display: block;
  width: auto;
  height: 30px;
  max-width: 110px;
  object-fit: contain;
  object-position: left center;
  filter:
    grayscale(.9)
    contrast(1.15);
}

.vehicle-picker__brand-logo[hidden] {
  display: none;
}

.vehicle-picker__hint {
  max-width: 420px;
  color:
    #7a898a;
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
  white-space: nowrap;
}

.vehicle-picker__meta
.vehicle-picker__hint {
  color:
    #819092;
  font-size: 12px;
  line-height: 1.35;
}

.vehicle-picker__footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
  text-align: left;
}

.vehicle-picker__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color:
    #738285;
  font-size: 12px;
  line-height: 1.45;
}

.vehicle-picker__note::before {
  content: "";
  width: 7px;
  height: 7px;
  flex:
    0
    0
    7px;
  border-radius: 50%;
  background:
    var(--accent);
  box-shadow:
    0 0 0 5px
    rgba(20,184,166,.08);
}

@media (max-width: 620px) {
  .vehicle-picker {
    margin-top: 12px;
    padding: 18px;
    border-radius: 24px;
  }
  .vehicle-picker__title-row {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .vehicle-picker__title {
    flex:
      0
      1
      auto;
    min-width: 0;
    white-space: nowrap;
  }
  .vehicle-picker__brand {
    flex:
      0
      0
      auto;
  }
  .vehicle-picker__hint {
    display: block;
    width: 100%;
    margin-top: 9px;
  }
}

/* ============================================================
   END VEHICLE PICKER
   ============================================================ */

/* ============================================================
   PICKER COLOR SYSTEM — CANONICAL
   Shared visual ownership for Brand + Selection picker
   ============================================================ */

.brand-picker__panel,
.brand-picker__header,
.brand-picker__scroll,
.brand-finder,
.selection-picker__panel,
.selection-picker__header,
.selection-picker__scroll {
  background: var(--mm-picker-bg);
}

.brand-finder__search,
.brand-finder__letter,
.selection-picker__item,
.selection-picker__item-arrow {
  background: var(--mm-picker-control-bg);
}

/* ============================================================
   BRAND PICKER — CANONICAL BRAND LAYER

   Shared popup shell:
   brand-picker + selection-picker foundation

   Brand-specific owner:
   this block only
   ============================================================ */

/* ---------- SCROLL / GRID ---------- */

.brand-picker__scroll {
  padding:
    20px
    30px
    30px;
}

.brand-picker__list {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 1;
  transition:
    opacity .15s ease,
    transform .18s ease;
}

.brand-picker__list--filtering {
  opacity: .18;
  transform:
    translate3d(0, 3px, 0)
    scale(.997);
}

/* ---------- CARD ---------- */

.brand-picker__item,
.brand-picker__item--finder-visible {
  --brand-rgb: 118, 143, 146;
  --brand-rgb-2: 175, 190, 190;
  position: relative;
  min-width: 0;
  height: 196px;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 16px;
  background:
    var(--mm-control-surface-strong);
  color:
    var(--mm-text);
  box-shadow: none;
  opacity: 1;
  transform: none;
  cursor: pointer;
  transition:
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.brand-picker__item::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(var(--brand-rgb), .16),
      rgba(var(--brand-rgb), .06) 48%,
      rgba(var(--brand-rgb-2), .10)
    );
  pointer-events: none;
}

.brand-picker__item::after {
  content: "";
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background:
    rgb(
      var(
        --brand-rgb,
        210, 210, 210
      )
    );
  pointer-events: none;
}

.brand-picker--open
.brand-picker__item:hover,
.brand-picker--open
.brand-picker__item:focus {
  outline: none;
  border-color:
    rgba(145,158,187,.52);
  transform:
    translateY(-3px);
  background:
    rgba(176,189,214,.26);
  box-shadow:
    0 10px 22px
    rgba(var(--brand-rgb), .10);
}

/* ---------- VISUAL ---------- */

.brand-picker__visual {
  position: absolute;
  inset:
    0
    0
    44px
    0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    #fff;
}

.brand-picker__visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 190px;
  height: 135px;
  right: -25px;
  top: 18px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(var(--brand-rgb), .22),
      rgba(var(--brand-rgb-2), .08) 48%,
      transparent 72%
    );
  filter:
    blur(24px);
  opacity: .8;
  pointer-events: none;
  transition:
    opacity .3s ease,
    transform .4s ease;
}

.brand-picker__visual::after {
  display: none;
}

/* ---------- HERO LOGO ---------- */

.brand-picker__hero-logo {
  position: absolute;
  z-index: 2;
  left: 17px;
  top: 20px;
  width: 30%;
  height: 48px;
  margin: 0;
  object-fit: contain;
  object-position: left center;
  opacity: .84;
  filter:
    grayscale(1)
    contrast(1.05);
  transform: none;
  pointer-events: none;
  transition:
    opacity .16s ease,
    transform .18s ease;
}

.brand-picker__item:hover
.brand-picker__hero-logo,
.brand-picker__item:focus
.brand-picker__hero-logo {
  opacity: 1;
  transform:
    translateY(-2px);
}

/* ---------- HERO CAR ---------- */

.brand-picker__hero-car {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 5px;
  width: 62%;
  height: 108px;
  margin: 0;
  object-fit: contain;
  object-position: right bottom;
  filter:
    drop-shadow(
      0 8px 7px
      rgba(0,0,0,.08)
    );
  transform: none;
  pointer-events: none;
  transition:
    transform .18s ease,
    filter .18s ease;
}

.brand-picker--open
.brand-picker__item:hover
.brand-picker__hero-car,
.brand-picker--open
.brand-picker__item:focus
.brand-picker__hero-car {
  transform:
    translate3d(-2px,-2px,0)
    scale(1.035);
  filter:
    drop-shadow(
      0 11px 10px
      rgba(0,0,0,.10)
    );
}

/* ---------- FOOTER ---------- */

.brand-picker__item-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 34px;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding:
    0
    16px;
  border: 0;
  background:
    #fff;
  box-shadow: none;
}

.brand-picker__item-footer::before,
.brand-picker__item-footer::after {
  display: none;
}

.brand-picker__logo-bubble,
.brand-picker__mini-logo {
  display: none;
}

.brand-picker__name {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color:
    var(--mm-text);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- FINDER ANIMATION ---------- */

.brand-picker__item--finder-visible {
  animation:
    brandFinderReveal
    440ms
    cubic-bezier(.16,1,.3,1)
    both;
  animation-delay:
    calc(
      min(var(--finder-index, 14), 14)
      * 25ms
    );
}

@media (max-width: 1050px) {
  .brand-picker__list {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .brand-picker__scroll {
    padding:
      16px
      20px
      22px;
  }
  .brand-picker__list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 620px) {
  .brand-picker__scroll {
    padding:
      11px
      11px
      max(
        20px,
        env(safe-area-inset-bottom)
      );
  }
  .brand-picker__list {
    gap: 8px;
  }
  .brand-picker__item,
  .brand-picker__item--finder-visible {
    height: 148px;
    border-radius: 13px;
  }
  .brand-picker__item::after {
    height: 7px;
  }
  .brand-picker__visual {
    inset:
      0
      0
      36px
      0;
  }
  .brand-picker__visual::before,
  .brand-picker__visual::after {
    display: none;
  }
  .brand-picker__hero-logo {
    left: 10px;
    top: 13px;
    width: 34%;
    height: 34px;
  }
  .brand-picker__hero-car {
    right: 4px;
    bottom: 4px;
    width: 68%;
    height: 82px;
  }
  .brand-picker__item-footer {
    bottom: 7px;
    height: 29px;
    padding:
      0
      10px;
  }
  .brand-picker__name {
    font-size: 10.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-picker__item,
  .brand-picker__hero-logo,
  .brand-picker__hero-car,
  .brand-picker__visual::before,
  .brand-picker__list {
    transition: none;
    animation: none;
  }
}

/* ============================================================
   END BRAND PICKER — CANONICAL BRAND LAYER
   ============================================================ */

/* ============================================================
   SELECTION PICKER — CANONICAL SELECTION LAYER

   Shared popup shell:
   brand-picker + selection-picker foundation

   Single selection-specific owner:
   this block
   ============================================================ */

/* ============================================================
   PANEL GEOMETRY
   ============================================================ */

.selection-picker__panel {
  width:
    min(
      820px,
      calc(100vw - 48px)
    );
}

/* ============================================================
   HEADER CONTENT
   ============================================================ */

.selection-picker__header {
  padding:
    24px
    68px
    21px
    28px;
  text-align: left;
}

.selection-picker__heading {
  min-width: 0;
}

.selection-picker__kicker {
  margin:
    0
    0
    7px;
}

.selection-picker__title {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  font-size: 30px;
  line-height: 1.08;
}

/* ============================================================
   CONTEXT
   ============================================================ */

.selection-picker__context {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  max-width: 260px;
  height: 52px;
  margin:
    0
    0
    0
    24px;
  vertical-align: middle;
  color:
    var(--mm-text-muted);
  font-family:
    Inter,
    sans-serif;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.selection-picker__brand-logo {
  display: block;
  width: auto;
  height: 42px;
  max-width: 190px;
  max-height: 42px;
  margin: 0;
  object-fit: contain;
  object-position: left center;
  filter:
    grayscale(1)
    contrast(1.04);
  opacity: .94;
}

/* ---------- Generation / modification header ---------- */

.selection-picker[data-type="generation"]
.selection-picker__heading,
.selection-picker[data-type="modification"]
.selection-picker__heading {
  display: grid;
  grid-template-columns:
    max-content
    minmax(0, 1fr);
  grid-template-rows:
    auto
    auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 10px;
}

.selection-picker[data-type="generation"]
.selection-picker__kicker,
.selection-picker[data-type="modification"]
.selection-picker__kicker {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.selection-picker[data-type="generation"]
.selection-picker__title,
.selection-picker[data-type="modification"]
.selection-picker__title {
  grid-column:
    1 / -1;
  grid-row: 2;
  margin: 0;
}

.selection-picker[data-type="generation"]
.selection-picker__context,
.selection-picker[data-type="modification"]
.selection-picker__context {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
}

/* ---------- Vehicle context ---------- */

.selection-picker__context--vehicle {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.selection-picker__vehicle-logo {
  display: block;
  width: auto;
  height: 22px;
  max-width: 82px;
  object-fit: contain;
  object-position: center;
  flex:
    0
    0
    auto;
}

.selection-picker__vehicle-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color:
    var(--mm-text-muted);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ============================================================
   SCROLL / LIST
   ============================================================ */

.selection-picker__scroll {
  padding:
    20px
    28px
    26px;
}

.selection-picker__list {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: 9px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background:
    transparent;
  list-style: none;
}

/* ============================================================
   ITEM
   ============================================================ */

.selection-picker__item {
  position: relative;
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    28px;
  grid-template-rows:
    1fr;
  align-items: center;
  column-gap: 9px;
  margin: 0;
  padding:
    0
    10px
    0
    14px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 12px;
  color:
    var(--mm-text);
  box-shadow: none;
  opacity: 1;
  transform: none;
  cursor: pointer;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.selection-picker__item:hover,
.selection-picker__item:focus-visible {
  outline: none;
  border-color:
    rgba(145,158,187,.52);
  background:
    rgba(176,189,214,.26);
  box-shadow:
    0 6px 16px
    rgba(165,177,202,.16);
  transform: none;
}

/* ============================================================
   ITEM CONTENT
   ============================================================ */

.selection-picker__item-content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  padding:
    8px
    0;
}

.selection-picker__item-main {
  min-width: 0;
  display: block;
  overflow: hidden;
  color:
    var(--mm-text);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: -.012em;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.selection-picker__item-code {
  display: block;
  margin-top: 2px;
  color:
    var(--mm-text-secondary);
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .035em;
}

.selection-picker__item-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap:
    3px
    10px;
  margin:
    2px
    0
    0;
  padding: 0;
  overflow: visible;
  color:
    var(--mm-text-muted);
  font-family:
    Inter,
    sans-serif;
  font-size: 10.5px;
  line-height: 1.25;
  text-align: left;
}

.selection-picker__item-detail {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.selection-picker__item-detail
+
.selection-picker__item-detail::before {
  content: "·";
  margin-right: 10px;
  color:
    var(--mm-border-strong);
}

/* ============================================================
   ITEM ARROW
   ============================================================ */

.selection-picker__item-arrow {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 8px;
  color:
    var(--mm-text-secondary);
  box-shadow: none;
  font-family:
    Arial,
    sans-serif;
  font-size: 17px;
  line-height: 1;
  text-align: center;
  transform: none;
  transition:
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease;
}

.selection-picker__item:hover
.selection-picker__item-arrow,
.selection-picker__item:focus-visible
.selection-picker__item-arrow {
  border-color:
    rgba(145,158,187,.52);
  background:
    rgba(176,189,214,.32);
  color:
    var(--mm-text-secondary);
  box-shadow: none;
  transform: none;
}

/* ============================================================
   TYPE-SPECIFIC GRID
   ============================================================ */

.selection-picker[data-type="generation"]
.selection-picker__list,
.selection-picker[data-type="modification"]
.selection-picker__list {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}

.selection-picker[data-type="generation"]
.selection-picker__item {
  min-height: 62px;
}

.selection-picker[data-type="modification"]
.selection-picker__item {
  min-height: 76px;
}

/* ============================================================
   ENTRY ANIMATION
   Legacy functionality preserved.
   ============================================================ */

.selection-picker--open
.selection-picker__item {
  animation:
    selectionIceItemIn
    440ms
    cubic-bezier(.16,1,.3,1)
    both;
  animation-delay:
    calc(
      min(
        var(--selection-index, 14),
        14
      )
      * 24ms
    );
}

@media (max-width: 800px) {
  .selection-picker__header,
  .selection-picker__context {
    text-align: left;
  }
  .selection-picker__context {
    margin-left: 0;
    margin-right: 0;
  }
  .selection-picker__scroll {
    padding:
      18px
      20px
      22px;
  }
}

@media (max-width: 620px) {
  .selection-picker__panel {
    width: 100%;
  }
  .selection-picker__header {
    padding:
      18px
      58px
      16px
      16px;
  }
  .selection-picker__title {
    font-size: 24px;
  }
  .selection-picker[data-type="generation"]
  .selection-picker__heading,
  .selection-picker[data-type="modification"]
  .selection-picker__heading {
    grid-template-columns:
      max-content
      minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 8px;
  }
  .selection-picker__vehicle-logo {
    height: 18px;
    max-width: 60px;
  }
  .selection-picker__vehicle-name {
    font-size: 11px;
  }
  .selection-picker__context {
    max-width: 125px;
    height: 38px;
    margin-left: 12px;
  }
  .selection-picker[data-type="generation"]
  .selection-picker__context,
  .selection-picker[data-type="modification"]
  .selection-picker__context {
    margin: 0;
  }
  .selection-picker__brand-logo {
    height: 32px;
    max-width: 110px;
    max-height: 32px;
  }
  .selection-picker__scroll {
    padding:
      13px
      13px
      max(
        20px,
        env(safe-area-inset-bottom)
      );
  }
  .selection-picker__list,
  .selection-picker[data-type="generation"]
  .selection-picker__list,
  .selection-picker[data-type="modification"]
  .selection-picker__list {
    grid-template-columns:
      minmax(0, 1fr);
    gap: 7px;
  }
  .selection-picker__item,
  .selection-picker[data-type="generation"]
  .selection-picker__item,
  .selection-picker[data-type="modification"]
  .selection-picker__item {
    min-height: 60px;
    grid-template-columns:
      minmax(0, 1fr)
      28px;
    padding:
      0
      9px
      0
      13px;
    border-radius: 12px;
  }
  .selection-picker__item-arrow {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  .selection-picker__item-main {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .selection-picker__item,
  .selection-picker__item-arrow {
    animation: none;
    transition: none;
  }
}

/* ============================================================
   END SELECTION PICKER — CANONICAL SELECTION LAYER
   ============================================================ */

/* ============================================================
   BRAND FINDER — CANONICAL
   Single owner: styles-v2.css
   ============================================================ */

.brand-finder {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin:
    0
    0
    18px;
  padding:
    0
    30px;
}

/* ---------- SEARCH ---------- */

.brand-finder__search {
  position: relative;
  flex: 0 1 285px;
  min-width: 210px;
  display: flex;
  align-items: center;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 14px;
  box-shadow: none;
  transition:
    border-color .15s ease,
    background-color .15s ease,
    box-shadow .15s ease;
}

.brand-finder__search:focus-within {
  border-color:
    rgba(145,158,187,.52);
  background:
    rgba(176,189,214,.26);
  box-shadow:
    0 0 0 3px
    rgba(165,177,202,.12);
}

.brand-finder__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform:
    translateY(-50%);
  color:
    var(--mm-text-muted);
  pointer-events: none;
}

.brand-finder__input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding:
    0
    46px
    0
    42px;
  border: 0;
  outline: 0;
  background:
    transparent;
  color:
    var(--mm-text);
  font-family:
    Inter,
    sans-serif;
  font-size: 13px;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
}

.brand-finder__input::placeholder {
  color:
    var(--mm-text-muted);
}

/* ---------- CLEAR ---------- */

.brand-finder__clear {
  position: absolute;
  right: 9px;
  top: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 9px;
  background:
    var(--mm-control-surface-strong);
  color:
    var(--mm-text);
  box-shadow: none;
  cursor: pointer;
  transform:
    translateY(-50%);
  transition:
    border-color .14s ease,
    background-color .14s ease;
}

.brand-finder__clear:hover,
.brand-finder__clear:focus-visible {
  outline: none;
  border-color:
    rgba(145,158,187,.52);
  background:
    rgba(176,189,214,.30);
}

/* ---------- ALPHABET ---------- */

.brand-finder__alphabet {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.brand-finder__alphabet::-webkit-scrollbar {
  display: none;
}

.brand-finder__letter {
  min-width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:
    0
    8px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 8px;
  color:
    var(--mm-text);
  box-shadow: none;
  font-family:
    Inter,
    sans-serif;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color .14s ease,
    background-color .14s ease,
    color .14s ease;
}

.brand-finder__letter:hover,
.brand-finder__letter:focus-visible {
  outline: none;
  border-color:
    rgba(145,158,187,.52);
  background:
    rgba(176,189,214,.28);
}

.brand-finder__letter--active {
  border-color:
    rgba(26,43,77,.22);
  background:
    rgba(26,43,77,.72);
  color:
    #fff;
}

/* ---------- EMPTY ---------- */

.brand-finder__empty {
  margin:
    14px
    0
    0;
  padding:
    14px
    16px;
  border: 0;
  border-radius: 12px;
  background:
    rgba(176,189,214,.12);
  color:
    var(--mm-text-muted);
  font-family:
    Inter,
    sans-serif;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

@media (max-width: 800px) {
  .brand-finder {
    padding:
      0
      20px;
  }
}

@media (max-width: 620px) {
  .brand-finder {
    display: block;
    margin-bottom: 14px;
    padding:
      0
      15px;
  }
  .brand-finder__search {
    width: 100%;
    min-width: 0;
  }
  .brand-finder__input {
    min-height: 44px;
    padding:
      0
      42px
      0
      39px;
  }
  .brand-finder__search-icon {
    left: 13px;
    width: 16px;
    height: 16px;
  }
  .brand-finder__clear {
    right: 7px;
    width: 29px;
    height: 29px;
  }
  .brand-finder__alphabet {
    margin-top: 9px;
    gap: 5px;
  }
  .brand-finder__letter {
    min-width: 28px;
    height: 28px;
    padding:
      0
      7px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-finder__search,
  .brand-finder__clear,
  .brand-finder__letter {
    transition: none;
  }
}

/* ============================================================
   END BRAND FINDER — CANONICAL
   ============================================================ */

/* ============================================================
   SERVICE DASHBOARD — RUNTIME COMPATIBILITY

   These classes are still emitted by app.js.
   They have no second owner elsewhere in V2.

   The old visual skin is intentionally NOT preserved.
   They now use the current dashboard design language.
   ============================================================ */

.service-dashboard__fact {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns:
    32px
    minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding:
    13px
    14px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius:
    var(--mm-radius-medium);
  background:
    var(--mm-control-surface-strong);
  color:
    var(--mm-text);
  box-shadow: none;
}

.service-dashboard__fact
.catalog-spec__icon {
  margin: 0;
}

.service-dashboard__fact-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.service-dashboard__fact-label {
  color:
    var(--mm-text-secondary);
  font-size: 11px;
  line-height: 1.25;
}

.service-dashboard__fact-value {
  min-width: 0;
  color:
    var(--mm-text);
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.service-dashboard__fact-note {
  color:
    var(--mm-text-muted);
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 620px) {
  .service-dashboard__fact {
    grid-template-columns:
      30px
      minmax(0, 1fr);
    gap: 10px;
    padding:
      11px
      12px;
  }
  .service-dashboard__fact-value {
    font-size: 13px;
  }
}

/* ============================================================
   END SERVICE DASHBOARD — RUNTIME COMPATIBILITY
   ============================================================ */

/* ============================================================
   VEHICLE PROGRESS — CANONICAL
   Single owner: styles-v2.css
   ============================================================ */

.vehicle-progress {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns:
    auto 1fr
    auto 1fr
    auto 1fr
    auto;
  align-items: start;
  gap: 10px;
  margin-top: 25px;
  padding-top: 20px;
  border-top:
    1px solid
    var(--mm-border);
}

/* ---------- MOBILE GUIDANCE ---------- */

.vehicle-progress__guidance {
  display: none;
}


/* ---------- ITEM ---------- */

.vehicle-progress__item {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 68px;
  color:
    var(--mm-text-muted);
  transition:
    color 280ms ease;
}

.vehicle-progress__item--pending {
  color:
    var(--mm-text-muted);
}

.vehicle-progress__item--active,
.vehicle-progress__item--done {
  color:
    var(--mm-text);
}

/* ---------- NODE ---------- */

.vehicle-progress__node {
  position: relative;
  width: 11px;
  height: 11px;
  border:
    2px solid
    var(--mm-border-strong);
  border-radius: 50%;
  background:
    var(--mm-surface);
  box-shadow: none;
  transition:
    background 320ms ease,
    border-color 320ms ease,
    transform 320ms ease;
}

.vehicle-progress__item--pending
.vehicle-progress__node {
  border-color:
    var(--mm-border-strong);
  background:
    var(--mm-surface);
}

.vehicle-progress__item--active
.vehicle-progress__node {
  border-color:
    var(--mm-text);
  background:
    var(--mm-text);
  box-shadow: none;
  transform:
    scale(1.08);
}

.vehicle-progress__item--done
.vehicle-progress__node {
  border-color:
    var(--mm-text);
  background:
    var(--mm-surface);
  box-shadow: none;
  transform:
    scale(1.08);
}

.vehicle-progress__item--done
.vehicle-progress__node::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 4px;
  height: 7px;
  border:
    solid
    var(--mm-text);
  border-width:
    0
    1.5px
    1.5px
    0;
  transform:
    translate(-50%,-50%)
    rotate(45deg);
}

/* ---------- LABEL ---------- */

.vehicle-progress__label {
  color:
    currentColor;
  font-size: 10px;
  line-height: 1.2;
}

/* ---------- CONNECTOR ---------- */

.vehicle-progress__line {
  position: relative;
  overflow: hidden;
  height: 2px;
  margin-top: 5px;
  border-radius: 999px;
  background:
    var(--mm-border);
  box-shadow: none;
  transition:
    background 420ms ease;
}

.vehicle-progress__line--done {
  background:
    var(--mm-text);
}

.vehicle-progress__line--loading {
  background:
    linear-gradient(
      90deg,
      var(--mm-text) 0%,
      var(--mm-text) 35%,
      var(--mm-border-strong) 70%,
      var(--mm-border) 100%
    );
}

.vehicle-progress__line--loading::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -38%;
  width: 34%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.72),
      transparent
    );
  filter:
    blur(.5px);
  animation:
    vehicleProgressTravel
    1.65s
    cubic-bezier(.45,0,.55,1)
    infinite;
}

@media (max-width: 620px) {
  .vehicle-progress {
    grid-template-columns:
      auto 1fr
      auto 1fr
      auto 1fr
      auto;
    gap: 5px;
    margin-top: 14px;
    padding-top: 14px;
  }

.vehicle-progress__guidance {
    --vehicle-guidance-progress: 25%;

    position: relative;

    display: block;

    overflow: hidden;

    min-height: 72px;

    margin-top: 8px;

    padding: 0;

    border:
      1px solid
      var(--mm-info-border);

    border-radius:
      15px;

    background:
      var(--mm-bg);

    box-shadow:
      0 7px 20px
      rgba(24,67,107,.14);

    transition:
      transform 140ms ease,
      box-shadow 160ms ease,
      border-color 160ms ease;

    -webkit-tap-highlight-color:
      transparent;
  }

.vehicle-progress__guidance::before {
  content: "";

  position: absolute;
  z-index: 0;

  inset:
    0
    auto
    0
    0;

  width:
    var(--vehicle-guidance-progress);

  background-color:
    rgb(42, 159, 255);

  background-image:
    linear-gradient(
      45deg,
      rgba(255,255,255,.20) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255,255,255,.20) 50%,
      rgba(255,255,255,.20) 75%,
      transparent 75%,
      transparent
    );

  background-size:
    32px
    32px;

  background-position:
    0
    0;

  animation:
    vehicleGuidanceStripeFlow
    .9s
    linear
    infinite;

  transition:
    width
    .55s
    cubic-bezier(.22,1,.36,1);

  pointer-events: none;
}

  .vehicle-progress__guidance-wrap {
    position: sticky;
    bottom: 10px;
    z-index: 20;

    padding:
      18px
      0;

  }

  .vehicle-progress__guidance-copy {
    display: flex;
    align-items: baseline;
    gap: 7px;

    color:
      var(--mm-info-color);

    font-family:
      var(--font-body);

    font-size: 14px;
    line-height: 1.3;

    padding:
      10px
      0;

  }

  .vehicle-progress__guidance-step,
  .vehicle-progress__guidance-text {
    position: relative;
    z-index: 1;
  }

  .vehicle-progress__guidance-step {
    flex:
      0
      0
      auto;

    font-weight: 750;
    white-space: nowrap;
  }

  .vehicle-progress__guidance-text {
    min-width: 0;
    font-weight: 550;
  }

  .vehicle-progress__guidance--actionable {
    cursor: pointer;

    border-color:
      rgb(42, 159, 255);
  }


  .vehicle-progress__guidance--actionable:active {
    transform:
      translateY(1px)
      scale(.99);

    box-shadow:
      0 3px 10px
      rgba(24,67,107,.10);
  }


  /*
   * Action rectangle.
   * Intentionally empty for now.
   * Chevron will be added separately.
   */
  .vehicle-progress__guidance--actionable::after {
    content:
      attr(data-action-label);

    position: absolute;
    z-index: 3;

    top: 50%;
    right: 10px;

    width: 190px;
    height: 54px;

    box-sizing:
      border-box;

    display: flex;
    align-items: center;

    padding:
      0
      54px
      0
      16px;

    transform:
      translateY(-50%);

    border-radius:
      12px;

    background-color:
      var(--mm-surface-dark);

    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Ccircle cx='27' cy='27' r='18' fill='%23fff'/%3E%3Cpath d='M23 18 L32 27 L23 36' fill='none' stroke='%23111111' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat:
      no-repeat;

    background-position:
      right center;

    background-size:
      54px
      54px;

    color:
      #fff;

    font-family:
      var(--font-body);

    font-size:
      11px;

    line-height:
      1.15;

    font-weight:
      700;

    text-align:
      left;

    box-shadow:
      0 3px 9px
      rgba(0,0,0,.10);

    pointer-events: none;
  }


  /*
   * White circular button inside the dark action square.
   */



  /*
   * Chevron from the reference:
   * dark mark inside the white circle.
   */



  .vehicle-progress__guidance--complete {
    background:
      var(--mm-info-surface-strong);
  }


  .vehicle-progress__guidance--complete::before {
    animation: none;
  }


  .vehicle-progress__guidance--complete::after {
    display: none;
  }
  .vehicle-progress__item {
    min-width: 42px;
    gap: 5px;
  }
  .vehicle-progress__label {
    font-size: 9px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .vehicle-progress__line {
    margin-left: -1px;
    margin-right: -1px;
  }
}

@keyframes vehicleGuidanceStripeFlow {

  from {
    background-position:
      0
      0;
  }

  to {
    background-position:
      32px
      0;
  }

}


@media (prefers-reduced-motion: reduce) {
  .vehicle-progress__guidance::before,
  .vehicle-progress__line--loading::after {
    animation: none !important;
  }
}

/* ============================================================
   END VEHICLE PROGRESS — CANONICAL
   ============================================================ */

/* ============================================================
   CATALOG PRODUCT — CANONICAL STANDALONE LAYER
   Single owner: styles-v2.css

   Commercial cards may still compose with oil-card classes.
   Old commercial oil-card skin is intentionally NOT migrated here.
   ============================================================ */

.catalog-product {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns:
    92px
    minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding:
    16px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 16px;
  background:
    var(--mm-control-surface-strong);
  color:
    var(--mm-text);
  box-shadow: none;
  transition:
    border-color .15s ease,
    background-color .15s ease,
    box-shadow .15s ease;
}

.catalog-product--selected {
  border-color:
    rgba(145,158,187,.52);
  background:
    rgba(176,189,214,.26);
  box-shadow:
    0 7px 16px
    rgba(165,177,202,.14);
}

/* ---------- MEDIA ---------- */

.catalog-product__media {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background:
    #fff;
}

.catalog-product__image {
  display: block;
  width: 100%;
  height: 92px;
  object-fit: contain;
  margin: 0;
}

/* ---------- CONTENT ---------- */

.catalog-product__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catalog-product__name {
  min-width: 0;
  margin: 0;
  color:
    var(--mm-text);
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* ---------- PRICE ---------- */

.catalog-product__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap:
    6px
    12px;
}

.catalog-product__unit-price {
  color:
    var(--mm-text-secondary);
  font-size: 12px;
  line-height: 1.3;
}

.catalog-product__formula {
  color:
    var(--mm-text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.catalog-product__total {
  margin-left: auto;
  color:
    var(--mm-text);
  font-size: 14px;
  line-height: 1.2;
}

.catalog-product__total--request {
  color:
    var(--mm-text-secondary);
}

/* ---------- SELECT ---------- */

.catalog-product__select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding:
    0
    14px;
border-radius: 10px;
  background: var(--mm-cta-primary);
  color: #0b0b0b;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .055);
  cursor: pointer;
  transition:
    border-color .14s ease,
    background-color .14s ease;
}.catalog-product__select:hover,
.catalog-product__select:focus-visible
{
  outline: none;
  border-color:
    rgba(145,158,187,.52);
  background: var(--mm-select-hover-bg);
  color: var(--mm-select-hover-color);
}

/* ---------- LABOR ---------- */

.catalog-product__labor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding:
    9px
    11px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 10px;
  background:
    rgba(176,189,214,.12);
}

.catalog-product__labor--free {
  background:
    rgba(55,130,255,.12);
}

.catalog-product__labor-label {
  color:
    var(--mm-text-secondary);
  font-size: 11px;
  line-height: 1.3;
}

.catalog-product__labor-value {
  color:
    var(--mm-text);
  font-size: 12px;
  line-height: 1.3;
}

.catalog-product__labor-value--free {
  color:
    rgba(26,43,77,.72);
}

/* ---------- COMMERCIAL COMPOSITION ---------- */

.catalog-product--commercial {
  /*
   * Structural modifier only.
   *
   * The DOM may additionally receive oil-card__* classes.
   * Their visual skin remains owned by oil-card until
   * oil-card is migrated separately.
   */
  min-width: 0;
}

@media (max-width: 800px) {
  .catalog-product {
    grid-template-columns:
      78px
      minmax(0, 1fr);
    gap: 13px;
    padding: 14px;
  }
  .catalog-product__image {
    height: 78px;
  }
}

@media (max-width: 620px) {
  .catalog-product {
    grid-template-columns:
      64px
      minmax(0, 1fr);
    gap: 11px;
    padding:
      12px;
    border-radius: 14px;
  }
  .catalog-product__media {
    border-radius: 10px;
  }
  .catalog-product__image {
    height: 64px;
  }
  .catalog-product__name {
    font-size: 13px;
  }
  .catalog-product__price-row {
    gap:
      5px
      9px;
  }
  .catalog-product__total {
    margin-left: 0;
  }
  .catalog-product__select {
    min-height: 34px;
    padding:
      0
      12px;
  }
  .catalog-product__labor {
    padding:
      8px
      10px;
  }
}

/* ============================================================
   END CATALOG PRODUCT — CANONICAL STANDALONE LAYER
   ============================================================ */

/* ============================================================
   OIL CARD — CANONICAL
   Single owner: styles-v2.css
   ============================================================ */

/* ---------- BADGE ---------- */

.oil-card__badge {
  position: absolute;
  z-index: 4;
  left: 12px;
  top: 12px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding:
    0
    9px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 999px;
  background:
    var(--mm-control-surface-strong);
  color:
    var(--mm-text-secondary);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- MEDIA ---------- */

.oil-card__media {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding:
    44px
    14px
    16px;
  border-right:
    1px solid
    rgba(145,158,187,.34);
  background:
    #fff;
}

.oil-card__media img,
.oil-card__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 125px;
  max-height: 150px;
  object-fit: contain;
  margin: 0;
}

/* ---------- CONTENT ---------- */

.oil-card__content {
  min-width: 0;
  padding:
    17px
    18px
    18px;
}

.oil-card__eyebrow {
  margin-bottom: 5px;
  color:
    var(--mm-text-muted);
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.oil-card__name {
  margin:
    0
    0
    11px;
  color:
    var(--mm-text);
  font-size: 15px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

/* ---------- REASON ---------- */

.oil-card__reason {
  display: grid;
  grid-template-columns:
    24px
    minmax(0,1fr);
  align-items: start;
  gap: 8px;
  margin-bottom: 10px;
  padding:
    8px
    10px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 10px;
  background:
    rgba(176,189,214,.12);
}

.oil-card__reason-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background:
    var(--mm-control-surface-strong);
  color:
    var(--mm-text-secondary);
  font-size: 11px;
}

.oil-card__reason-text {
  min-width: 0;
  color:
    var(--mm-text);
  font-size: 10px;
  line-height: 1.4;
}

.oil-card__reason-list {
  display: grid;
  gap: 4px;
  margin:
    -2px
    0
    10px;
  padding: 0;
  list-style: none;
}

.oil-card__reason-item {
  position: relative;
  padding-left: 14px;
  color:
    var(--mm-text);
  font-size: 9px;
  line-height: 1.4;
}

.oil-card__reason-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background:
    rgba(26,43,77,.42);
}

/* ---------- METRICS ---------- */

.oil-card__metrics {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );
  gap: 7px;
  margin: 0;
}

.oil-card__metric {
  min-width: 0;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding:
    8px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 12px;
  background:
    var(--mm-control-surface-strong);
  box-shadow: none;
}

.oil-card__metric-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1px;
  color:
    var(--mm-text-secondary);
}

.oil-card__metric-label {
  color:
    var(--mm-text-secondary);
  font-size: 8px;
  line-height: 1.2;
}

.oil-card__metric-value {
  min-width: 0;
  color:
    var(--mm-text);
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* ---------- FOOTER ---------- */

.oil-card__footer {
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    auto;
  align-items: center;
  gap: 12px;
  margin-top: 11px;
  padding-top: 11px;
  border-top:
    1px solid
    rgba(145,158,187,.34);
}

.oil-card__grand {
  min-width: 0;
}

.oil-card__grand-label {
  color:
    var(--mm-text-secondary);
  font-size: 9px;
  line-height: 1.2;
}

.oil-card__grand-value {
  margin-top: 2px;
  color:
    var(--mm-text);
  font-size: 20px;
  line-height: 1.08;
}

/* ---------- SELECT ---------- */

.oil-card__select {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:
    0
    14px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 10px;
  background:
    var(--mm-control-surface-strong);
  color:
    var(--mm-text);
  box-shadow: none;
  cursor: pointer;
  font-size: 10px;
  transition:
    border-color .14s ease,
    background-color .14s ease;
}

.oil-card__select:hover,
.oil-card__select:focus-visible,
.oil-card__select[aria-pressed="true"] {
  outline: none;
  border-color:
    rgba(145,158,187,.52);
  background:
    rgba(176,189,214,.30);
}

@media (max-width: 620px) {
  .oil-card__media {
    padding:
      38px
      9px
      11px;
  }
  .oil-card__media img,
  .oil-card__image {
    max-width: 92px;
    max-height: 116px;
  }
  .oil-card__content {
    padding:
      12px
      11px
      12px;
  }
  .oil-card__name {
    font-size: 13px;
  }
  .oil-card__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
    gap: 6px;
  }
  .oil-card__metric {
    min-height: 48px;
    padding: 7px;
  }
  .oil-card__footer {
    grid-template-columns:
      minmax(0,1fr);
    gap: 9px;
  }
  .oil-card__select {
    width: 100%;
  }
}

/* ============================================================
   END OIL CARD — CANONICAL
   ============================================================ */

/* ============================================================
   BOOKING DIALOG — CANONICAL V2 OWNER
   Migrated from legacy after runtime ownership audit.
   ============================================================ */

body.booking-dialog-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.booking-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.booking-dialog[hidden] {
  display: none;
}

.booking-dialog__backdrop {
  position: absolute;
  inset: 0;
  background:
    rgba(15, 35, 37, .56);
  -webkit-backdrop-filter:
    blur(14px);
  backdrop-filter:
    blur(14px);
  opacity: 0;
  transition:
    opacity .28s ease;
}

.booking-dialog__panel {
  position: relative;
  z-index: 1;
  width:
    min(100%, 760px);
  max-height:
    min(880px, calc(100dvh - 36px));
  overflow: hidden;
  border:
    1px solid rgba(255,255,255,.82);
  border-radius:
    28px 19px 30px 18px;
  background:
    linear-gradient(
      145deg,
      var(--mm-surface-soft),
      var(--mm-surface-soft)
    );
  box-shadow:
    0 35px 90px
    rgba(0,0,0,.22);
  opacity: 0;
  transform:
    translateY(18px)
    scale(.975);
  transition:
    opacity .28s ease,
    transform .32s
    cubic-bezier(.2,.8,.2,1);
}

.booking-dialog--open
.booking-dialog__backdrop {
  opacity: 1;
}

.booking-dialog--open
.booking-dialog__panel {
  opacity: 1;
  transform:
    translateY(0)
    scale(1);
}

.booking-dialog__scroll {
  max-height:
    min(880px, calc(100dvh - 36px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.booking-dialog__content {
  padding:
    32px 34px 30px;
}

.booking-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius:
    13px 9px 14px 9px;
  background:
    rgba(255,255,255,.72);
  box-shadow:
    0 8px 22px
    rgba(0,0,0,.07);
  cursor: pointer;
}

.booking-dialog__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--mm-text);
}

.booking-dialog__close span:first-child {
  transform:
    translate(-50%,-50%)
    rotate(45deg);
}

.booking-dialog__close span:last-child {
  transform:
    translate(-50%,-50%)
    rotate(-45deg);
}

.booking-dialog__header {
  padding-right: 52px;
  margin-bottom: 22px;
}

.booking-dialog__kicker {
  margin-bottom: 7px;
  color: var(--mm-text-secondary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.booking-dialog__title {
  margin: 0 0 14px;
  color: var(--mm-text);
  font-size:
    clamp(25px,4vw,38px);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -.035em;
}

.booking-dialog__vehicle {
  display: block;
  color: var(--mm-text);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 400;
}

.booking-dialog__vehicle-meta {
  display: block;
  margin-top: 4px;
  color: var(--mm-text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.booking-dialog__order,
.booking-dialog__form {
  padding: 20px;
  border:
    1px solid rgba(255,255,255,.82);
  border-radius:
    20px 14px 22px 13px;
  background:
    rgba(255,255,255,.48);
  box-shadow:
    0 16px 42px
    rgba(0,0,0,.045);
}

.booking-dialog__form {
  margin-top: 16px;
}

.booking-dialog__section-title {
  margin-bottom: 13px;
  color: var(--mm-text-secondary);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.booking-dialog__products {
  display: grid;
  gap: 1px;
}

.booking-dialog__product {
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    max-content;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  border-bottom:
    1px solid var(--mm-border);
}

.booking-dialog__product-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.booking-dialog__product-label {
  color: var(--mm-text-secondary);
  font-size: 8px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.booking-dialog__product-name {
  color: var(--mm-text);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.booking-dialog__product-meta {
  color: var(--mm-text-secondary);
  font-size: 9px;
  line-height: 1.35;
}

.booking-dialog__product-price {
  color: var(--mm-text);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 400;
  white-space: nowrap;
}

.booking-dialog__product-price--request {
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
}

.booking-dialog__benefit {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 10px 12px;
  border:
    1px solid var(--mm-border);
  border-radius:
    12px 8px 13px 8px;
  background:
    rgba(42,98,99,.045);
  color: var(--mm-text-secondary);
}

.booking-dialog__benefit--free {
  border-color:
    var(--mm-border);
  background:
    var(--mm-surface-soft);
  color: var(--mm-text);
}

.booking-dialog__benefit-icon {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius:
    8px 5px 9px 5px;
  background:
    rgba(0,0,0,.055);
  font-size: 10px;
  font-weight: 400;
}

.booking-dialog__benefit-text {
  font-size: 10px;
  line-height: 1.35;
  font-weight: 400;
}

.booking-dialog__totals {
  margin-top: 16px;
  padding-top: 12px;
  border-top:
    1px solid var(--mm-border);
}

.booking-dialog__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 4px 0;
  color: var(--mm-text-secondary);
  font-size: 10px;
  line-height: 1.3;
}

.booking-dialog__total strong {
  color: var(--mm-text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
}

.booking-dialog__total--grand {
  margin-top: 9px;
  padding-top: 12px;
  border-top:
    1px solid var(--mm-border);
  color: var(--mm-text);
  font-size: 13px;
  font-weight: 400;
}

.booking-dialog__total--grand strong {
  color: var(--mm-text);
  font-size: 22px;
  font-weight: 400;
}

.booking-dialog__field {
  display: block;
  margin-top: 13px;
}

.booking-dialog__field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--mm-text-secondary);
  font-size: 10px;
  line-height: 1.3;
  font-weight: 400;
}

.booking-dialog__field b {
  color: var(--mm-text-secondary);
}

.booking-dialog__field input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border:
    1px solid var(--mm-border);
  border-radius:
    13px 9px 14px 9px;
  outline: 0;
  background:
    rgba(255,255,255,.72);
  color: var(--mm-text);
  font: inherit;
  font-size: 13px;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.booking-dialog__field input:focus {
  border-color:
    rgba(20,24,24,.28);
  background: #fff;
  box-shadow:
    0 0 0 4px
    rgba(0,0,0,.045);
}

.booking-dialog__field
.booking-dialog__input--invalid {
  border-color:
    rgba(197,75,75,.46);
  box-shadow:
    0 0 0 4px
    rgba(197,75,75,.07);
}

.booking-dialog__error {
  display: block;
  min-height: 14px;
  margin-top: 4px;
  color: #a64f4f;
  font-size: 8px;
  line-height: 1.3;
}

.booking-dialog__consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 10px;
  color: var(--mm-text-secondary);
  font-size: 9px;
  line-height: 1.45;
  cursor: default;
}

.booking-dialog__consent input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.booking-dialog__consent-mark {
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border:
    1px solid var(--mm-border);
  border-radius:
    7px 5px 8px 5px;
  background:
    var(--mm-surface-soft);
  color: var(--mm-text);
  font-size: 10px;
  font-weight: 400;
}

.booking-dialog__form-status {
  min-height: 16px;
  margin-top: 8px;
  color: #a64f4f;
  font-size: 9px;
}

.booking-dialog__submit,
.booking-dialog__success-button {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius:
    14px 9px 15px 9px;
  background:
    linear-gradient(
      135deg,
      #111,
      #111
    );
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .015em;
  cursor: pointer;
  box-shadow:
    0 13px 28px
    rgba(0,0,0,0);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

.booking-dialog__submit:hover,
.booking-dialog__success-button:hover {
  transform:
    translateY(-1px);
  box-shadow:
    0 16px 32px
    rgba(0,0,0,0);
}

.booking-dialog__submit:disabled {
  cursor: wait;
  opacity: .68;
  transform: none;
}

.booking-dialog__notice {
  margin: 10px 0 0;
  color: #7b8d8e;
  font-size: 8px;
  line-height: 1.45;
  text-align: center;
}

.booking-dialog__success {
  min-height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px 20px;
  text-align: center;
}

.booking-dialog__success-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius:
    24px 17px 26px 16px;
  background:
    var(--mm-surface-soft);
  color: #0d9185;
  font-size: 28px;
  font-weight: 400;
}

.booking-dialog__success-title {
  margin: 0 0 12px;
  color: var(--mm-text);
  font-size: 32px;
  line-height: 1.1;
}

.booking-dialog__success-text {
  max-width: 430px;
  margin: 0 0 25px;
  color: #62797a;
  font-size: 12px;
  line-height: 1.65;
}

.booking-dialog__success-button {
  width: auto;
  min-width: 220px;
  padding: 0 24px;
}

@media (max-width: 620px) {
.booking-dialog {
    align-items: end;
    padding:
      max(8px, env(safe-area-inset-top))
      0
      0;
  }
}

@media (max-width: 620px) {
.booking-dialog__panel {
    width: 100%;
    max-height:
      calc(100dvh - 8px);
    border-radius:
      24px 24px 0 0;
    transform:
      translateY(30px);
  }
}

@media (max-width: 620px) {
.booking-dialog__scroll {
    max-height:
      calc(100dvh - 8px);
    padding-bottom:
      env(safe-area-inset-bottom);
  }
}

@media (max-width: 620px) {
.booking-dialog__content {
    padding:
      25px 15px 22px;
  }
}

@media (max-width: 620px) {
.booking-dialog__close {
    top: 12px;
    right: 12px;
  }
}

@media (max-width: 620px) {
.booking-dialog__header {
    padding-right: 44px;
    margin-bottom: 17px;
  }
}

@media (max-width: 620px) {
.booking-dialog__title {
    font-size: 27px;
  }
}

@media (max-width: 620px) {
.booking-dialog__order,
.booking-dialog__form {
    padding: 15px;
    border-radius:
      17px 13px 18px 12px;
  }
}

@media (max-width: 620px) {
.booking-dialog__product {
    gap: 10px;
  }
}

@media (max-width: 620px) {
.booking-dialog__product-name {
    font-size: 11px;
  }
}

@media (max-width: 620px) {
.booking-dialog__product-price {
    font-size: 10px;
  }
}

@media (max-width: 620px) {
.booking-dialog__total--grand strong {
    font-size: 19px;
  }
}

@media (max-width: 620px) {
.booking-dialog__field input {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
.booking-dialog__backdrop,
.booking-dialog__panel,
.booking-dialog__submit,
.booking-dialog__success-button {
    transition: none;
  }
}

/* ============================================================
   END BOOKING DIALOG — CANONICAL V2 OWNER
   ============================================================ */

/* ============================================================
   CATALOG SECTION — CANONICAL
   Single owner: styles-v2.css
   ============================================================ */

.catalog-section {
  position: relative;
  min-width: 0;
  padding:
    22px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius:
    var(--mm-radius-large);
  background:
    #fff;
  box-shadow:
    var(--mm-shadow);
}

/* ---------- HEADER ---------- */

.catalog-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.catalog-section__title {
  min-width: 0;
  margin: 0;
  color:
    var(--mm-text);
  font-size: var(--mm-section-title-size);
  line-height: var(--mm-section-title-line-height);
}

.catalog-section__count {
  flex:
    0
    0
    auto;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:
    0
    8px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 999px;
  background:
    var(--mm-control-surface-strong);
  color:
    var(--mm-text-secondary);
  font-size: 11px;
  line-height: 1;
}

/* ---------- BODY ---------- */

.catalog-section__body {
  min-width: 0;
}

@media (max-width: 620px) {
  .catalog-section {
    padding:
      16px;
    border-radius:
      var(--mm-radius-medium);
  }
  .catalog-section__head {
    gap: 12px;
    margin-bottom: 14px;
  }
  .catalog-section__title {
    font-size: var(--mm-section-title-size);
  }
  .catalog-section__count {
    min-width: 26px;
    height: 26px;
    font-size: 10px;
  }
}

/* ============================================================
   END CATALOG SECTION — CANONICAL
   ============================================================ */

/* ============================================================
   CATALOG SPEC — CANONICAL STANDALONE
   Contextual dashboard icon rules remain separate.
   ============================================================ */

.catalog-spec {
  min-width: 0;
  display: grid;
  grid-template-columns:
    34px
    minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding:
    10px
    12px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 10px;
  background:
    var(--mm-control-surface-strong);
  color:
    var(--mm-text);
  box-shadow: none;
}

/* ---------- GLASS MODIFIER ---------- */

.catalog-spec--glass {
  background:
    rgba(176,189,214,.12);
  border:
    1px solid
    rgba(145,158,187,.34);
  box-shadow: none;
}

.catalog-spec--glass::after {
  display: none;
}

/* ---------- ICON ---------- */

.catalog-spec__icon {
  width: var(--mm-spec-icon-size);
  height: var(--mm-spec-icon-size);
  box-sizing: border-box;
  padding: var(--mm-spec-icon-padding);

  display: flex;
  align-items: center;
  justify-content: center;

  flex:
    0 0
    var(--mm-spec-icon-size);

  border: 0;

  border-radius:
    var(--mm-spec-icon-radius);

  background:
    var(--mm-spec-icon-bg);

  color:
    var(--mm-spec-icon-color);

  box-shadow:
    var(--mm-spec-icon-shadow);
}

.catalog-spec__icon svg {
  width: var(--mm-spec-icon-svg-size);
  height: var(--mm-spec-icon-svg-size);
  display: block;
}

/* ---------- TEXT ---------- */

.catalog-spec__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.catalog-spec__label {
  color:
    var(--mm-text-secondary);
  font-size: 10px;
  line-height: 1.2;
}

.catalog-spec__value {
  min-width: 0;
  color:
    var(--mm-text);
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .catalog-spec {
    grid-template-columns:
      32px
      minmax(0,1fr);
    gap: 9px;
    padding:
      9px
      10px;
  }
  .catalog-spec__icon {
    width: var(--mm-spec-icon-mobile-size);
    height: var(--mm-spec-icon-mobile-size);
    flex-basis: var(--mm-spec-icon-mobile-size);
    padding: var(--mm-spec-icon-mobile-padding);
    border-radius: var(--mm-spec-icon-mobile-radius);
  }
  .catalog-spec__value {
    font-size: 12px;
  }
}

/* ============================================================
   END CATALOG SPEC — CANONICAL STANDALONE
   ============================================================ */

/* ============================================================
   OIL BRAND MARK — CANONICAL
   Single owner: styles-v2.css
   ============================================================ */

.oil-brand-mark {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color:
    var(--mm-text-secondary);
}

.oil-brand-mark__logo {
  display: block;
  width: auto;
  height: 22px;
  max-width: 88px;
  object-fit: contain;
  flex:
    0
    0
    auto;
}

.oil-brand-mark__name {
  min-width: 0;
  color:
    var(--mm-text-secondary);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* ============================================================
   END OIL BRAND MARK — CANONICAL
   ============================================================ */

/* ============================================================
   STAGE — CANONICAL
   Single owner: styles-v2.css
   ============================================================ */

.stage {
  position: relative;
  min-width: 0;
  padding-inline: 20px;
  box-sizing: border-box;
  color:
    var(--mm-text);
}

.stage__title {
  margin: 0;
  font-size: 28px;
  line-height: 1.14;
  letter-spacing: -.03em;
}

.stage__subtitle {
  margin-top: 8px;
  max-width: 760px;
  color:
    var(--mm-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- VEHICLE HERO CONTEXT ---------- */

.vehicle-hero
.stage__title {
  font-size: 30px;
  line-height: 1.1;
}

.vehicle-hero
.stage__subtitle {
  max-width: 620px;
  color:
    var(--mm-text);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .vehicle-hero
  .stage__title {
    font-size: 27px;
  }
}

@media (max-width: 620px) {
  .stage {
    padding-inline: 10px;
    min-width: 0;
  }
  .stage__title {
    font-size: 23px;
  }
  .stage__subtitle {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
  }
  .vehicle-hero
  .stage__title {
    font-size: 23px;
  }
  .vehicle-hero
  .stage__subtitle {
    font-size: 12px;
    line-height: 1.4;
  }
}

/* ============================================================
   END STAGE — CANONICAL
   ============================================================ */

/* ============================================================
   TOPBAR — CANONICAL
   Single owner: styles-v2.css
   ============================================================ */

.topbar {
  position: relative;
  z-index: 2;
  width:
    min(
      calc(100% - 40px),
      var(--mm-container)
    );
  min-height: 76px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color:
    var(--mm-text);
}

/* ---------- LOGO ---------- */

.topbar__logo {
  min-width: 0;

  display: flex;
  align-items: center;

  color:
    var(--mm-text);

  font-family:
    Inter,
    sans-serif;
}

.topbar__logo .site-breadcrumbs {
  width: auto;
  min-width: 0;

  margin: 0;

  gap: 10px;

  overflow-x: auto;
  overflow-y: hidden;

  font-size: 12px;

  scrollbar-width: none;
}

.topbar__logo
.site-breadcrumbs::-webkit-scrollbar {
  display: none;
}

.topbar__logo
.site-breadcrumbs__separator {
  font-size: 19px;
}

/* ---------- STATUS ---------- */

.topbar__status {
  color:
    var(--mm-text-muted);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.topbar__dot {
  display: block;

  width: 8px;
  height: 8px;

  flex:
    0
    0
    8px;

  margin-right: 10px;

  border-radius: 50%;

  background:
    var(--accent);

  box-shadow:
    0
    0
    0
    5px
    rgba(20,184,166,.12);
}

@media (max-width: 620px) {
  .topbar {
    width:
      calc(100% - 28px);
    min-height: 62px;
  }

  .topbar__logo {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .topbar__status {
    flex: 0 0 auto;
  }
}

@media (max-width: 440px) {
  .topbar {
    align-items: flex-start;
    gap: 12px;
  }
  .topbar__status {
    text-align: right;
  }
}

/* ============================================================
   END TOPBAR — CANONICAL
   ============================================================ */

/* ============================================================
   RESULT — CANONICAL LIVE LAYER
   Existing contextual child rules remain separate.
   ============================================================ */

/* ---------- RESULT CONTENT ---------- */

.result__specs {
  display: block;
  min-width: 0;
  margin-bottom: 22px;
}

/* ---------- RESET ---------- */

.result__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding:
    0
    16px;
  border:
    1px solid
    rgba(145,158,187,.34);
  border-radius: 10px;
  background:
    transparent;
  color:
    var(--mm-text-secondary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color .14s ease,
    background-color .14s ease,
    color .14s ease;
}

.result__reset:hover,
.result__reset:focus-visible {
  outline: none;
  border-color:
    rgba(145,158,187,.52);
  background:
    var(--mm-control-surface-strong);
  color:
    var(--mm-text);
}

/* ============================================================
   END RESULT — CANONICAL LIVE LAYER
   ============================================================ */

/* ========================================================================
   STEP / STEPPER — canonical V2 owner
   ======================================================================== */

.stepper {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.step,
.step--disabled,
.step--done {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  filter: none;
  text-align: left;
  opacity: 1;
}

.step--disabled {
  opacity: 1;
}

.step--done {
  opacity: 1;
}

.step__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--font-body);
}

.step__num {
  display: none;
}

.step__label,
.step--done .step__label {
  color: #617173;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.step__body {
  position: relative;
}

/* Functional focus bridge:
   mark + model + generation selected,
   modification still pending. */

#stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) {
  grid-template-columns: .82fr .82fr 1fr 1.55fr;
}

#stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepMod .step__label {
  color: rgba(26,43,77,.72);
}

#stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepMod .dropdown {
  border-color: rgba(26,43,77,.16);
  background: var(--mm-control-surface-strong);
  box-shadow: none;
}

@media (max-width: 980px) {
  .stepper,
  #stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .stepper,
  #stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  #stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepMark,
  #stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepModel,
  #stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepGen {
    opacity: .72;
  }
  #stepper:has(#stepMark.step--done):has(#stepModel.step--done):has(#stepGen.step--done):not(:has(#stepMod.step--done)) #stepMod {
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid rgba(26,43,77,.08);
  }
}

/* ============================================================
   BG GLOW — CANONICAL
   Decorative legacy glow intentionally disabled.
   ============================================================ */

.bg-glow {
  display: none;
}

/* ============================================================
   END BG GLOW — CANONICAL
   ============================================================ */

/* ==========================================================================
   Catalog empty state
   Canonical V2 owner
   ========================================================================== */

.catalog-empty {
  padding: 16px;
  border: 1px dashed rgba(126, 157, 160, .22);
  border-radius: 12px;
  color: var(--mm-text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
}


/* ============================================================
   DASHBOARD MOBILE VEHICLE COMPOSITION
   Mobile-only visual composition.
   Desktop dashboard ownership remains unchanged.
   ============================================================ */

.service-dashboard__mobile-media,
.service-dashboard__mobile-vehicle-facts {
  display: none;
}


@media (max-width: 720px) {

  /* ----------------------------------------------------------
     HERO HEADING
     Left = brand/text 4fr
     Right = compact vehicle visual 1fr
     ---------------------------------------------------------- */

  .service-dashboard__hero-heading {
    grid-template-columns:
      54px
      1px
      minmax(0, 3fr)
      minmax(120px, 2fr);
    grid-template-rows:
      auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
  }


  .service-dashboard__brand-mark {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    align-self: center;
    margin: 0;
  }


  .service-dashboard__brand-logo {
    display: block;
    width: auto;
    height: 34px;
    max-width: 48px;
  }


  .service-dashboard__hero-heading::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    width: 1px;
    height: 48px;
    align-self: center;
    justify-self: center;
    background:
      rgba(145, 158, 187, .45);
  }


  .service-dashboard__heading-content {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    align-self: center;
  }


  .service-dashboard__mobile-media {
    grid-column: 4;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }


  .service-dashboard__mobile-image {
    display: block;
    width: 128%;
    max-width: 220px;
    height: auto;
    max-height: 170px;
    margin:
      auto
      -6%
      auto
      auto;
    object-fit: contain;
    object-position: center;
  }


  /* ----------------------------------------------------------
     DESKTOP VEHICLE COLUMN
     On mobile its information is represented in hero.
     ---------------------------------------------------------- */

  .service-dashboard__vehicle-column {
    display: none;
  }


  /* ----------------------------------------------------------
     FACTS
     Immediately below hero heading.
     Reuse canonical vehicle-facts visuals.
     ---------------------------------------------------------- */

  .service-dashboard__mobile-vehicle-facts {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 14px;
    padding:
      4px
      12px;
  }


  .service-dashboard__mobile-vehicle-facts
  .service-dashboard__vehicle-fact {
    min-height: 74px;
    grid-template-columns:
      34px
      minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    padding:
      10px
      12px;
    border-top: 0;
  }


  .service-dashboard__mobile-vehicle-facts
  .service-dashboard__vehicle-fact:nth-child(even) {
    border-left:
      1px solid
      var(--mm-border);
  }


  .service-dashboard__mobile-vehicle-facts
  .service-dashboard__vehicle-fact:nth-child(n+3) {
    border-top:
      1px solid
      var(--mm-border);
  }


  .service-dashboard__mobile-vehicle-facts
  .service-dashboard__vehicle-fact-content {
    grid-column: 2;
    display: block;
    min-width: 0;
  }


  .service-dashboard__mobile-vehicle-facts
  .service-dashboard__vehicle-fact-label {
    display: block;
    margin-bottom: 4px;
    font-size: 9px;
    line-height: 1.2;
  }


  .service-dashboard__mobile-vehicle-facts
  .service-dashboard__vehicle-fact-value {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    text-align: left;
  }


  /* ----------------------------------------------------------
     OIL FIT
     Comes after vehicle facts and leads into oil selection.
     ---------------------------------------------------------- */

  .service-dashboard__hero
  .oil-fit-explanation--hero {
    margin-top: 12px;
  }
}


/* ============================================================
   END DASHBOARD MOBILE VEHICLE COMPOSITION
   ============================================================ */


/* ============================================================
   SECTION TITLES — VISUAL CANONICAL
   Semantic h1/h2/h3 level is independent from visual styling.
   ============================================================ */

.stage__title,
.vehicle-picker__title,
.service-dashboard__title,
.oil-choice__title,
.filter-choice__title,
.catalog-calculator__title {
  margin: 0;
  color: var(--mm-title-color);
  font-family: var(--font-body);
  font-size: var(--mm-section-title-size);
  line-height: var(--mm-section-title-line-height);
  font-weight: var(--mm-section-title-weight);
  letter-spacing: var(--mm-section-title-letter-spacing);
}


/* Vehicle hero keeps H1 semantics, but uses section-title visuals. */

.vehicle-hero .stage__title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.02em;
}


@media (max-width: 420px) {

  .service-dashboard__hero-heading {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(105px, .72fr);

    grid-template-rows:
      auto
      auto;

    column-gap: 10px;
    row-gap: 8px;
  }

  .service-dashboard__hero-heading::before {
    display: none;
  }

  .service-dashboard__brand-mark {
    grid-column: 1;
    grid-row: 1;

    justify-content: flex-start;
  }

  .service-dashboard__heading-content {
    grid-column: 1;
    grid-row: 2;
  }

  .service-dashboard__mobile-media {
    grid-column: 2;
    grid-row:
      1
      / span 2;
  }

  .service-dashboard__mobile-image {
    width: 100%;
    max-width: 190px;
    max-height: 150px;

    margin: auto;
  }

  .service-dashboard__mobile-vehicle-facts
  .service-dashboard__vehicle-fact {
    padding:
      9px
      8px;
  }
}


@media (max-width: 720px) {

  .service-dashboard__heading-content
  .service-dashboard__title {
    margin: 0;
  }

  .service-dashboard__heading-content
  .service-dashboard__modification {
    margin-top: 6px;
  }
}


/* ============================================================
   DASHBOARD MOBILE EYEBROW FLOW
   hero-heading -> eyebrow -> facts -> oil explanation
   ============================================================ */

@media (max-width: 720px) {

  .service-dashboard__hero {
    display: flex;
    flex-direction: column;
  }

  .service-dashboard__hero-heading {
    order: 1;
  }

  .service-dashboard__eyebrow {
    order: 2;
    margin:
      8px
      0
      0
      0;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .10em;
    color: var(--mm-text-muted);
  }

  .service-dashboard__mobile-vehicle-facts {
    order: 3;
  }

  .service-dashboard__hero
  .oil-fit-explanation--hero {
    order: 4;
  }
}

/* ============================================================
   END DASHBOARD MOBILE EYEBROW FLOW
   ============================================================ */


@media (max-width: 720px) {

  .service-dashboard__heading-content {
    min-width: 0;
    overflow: visible;
  }

  .service-dashboard__title {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: normal;
    word-break: normal;
  }

  .service-dashboard__mobile-media {
    min-width: 0;
    overflow: visible;
  }
}


/* ============================================================
   MUTATION — MOBILE PROMO VISUAL BACKGROUND
   Keep promo horizontal; visual leaves layout flow.
   ============================================================ */

@media (max-width: 720px) {

  .service-dashboard__vehicle-promo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }


  .service-dashboard__vehicle-promo-content {
    position: relative;
    z-index: 2;
    min-width: 0;
  }


  .service-dashboard__vehicle-promo-visual {
    position: absolute;
    z-index: 0;

    right: 12px;
    bottom: -20px;

    width: 128px;
    height: 154px;

    margin: 0;
    opacity: .26;

    pointer-events: none;
  }


  .service-dashboard__vehicle-promo-placeholder {
    width: 100%;
    height: 100%;
  }
}

/* ============================================================
   END MUTATION — MOBILE PROMO VISUAL BACKGROUND
   ============================================================ */


/* ============================================================
   MUTATION — MOBILE PROMO FULL WIDTH CONTENT
   Visual is background only; content owns full promo width.
   ============================================================ */

@media (max-width: 720px) {

  .service-dashboard__vehicle-promo {
    display: block;
    width: 100%;
  }


  .service-dashboard__vehicle-promo-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: none;
    min-width: 0;

    display: grid;
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;

    grid-template-areas:
      "badge title action"
      "badge text  action";

    align-items: center;
    column-gap: 18px;
    row-gap: 8px;

    box-sizing: border-box;
  }


  .service-dashboard__vehicle-promo-badge {
    grid-area: badge;
    align-self: center;
    margin: 0;
  }


  .service-dashboard__vehicle-promo-title {
    grid-area: title;
    min-width: 0;
    max-width: none;
    margin: 0;
  }


  .service-dashboard__vehicle-promo-text {
    grid-area: text;
    min-width: 0;
    max-width: none;
    margin: 0;
  }


  .service-dashboard__vehicle-promo-action {
    grid-area: action;
    align-self: center;
    justify-self: end;

    width: auto;
    max-width: none;
    margin: 0;

    white-space: nowrap;
  }


  .service-dashboard__vehicle-promo-visual {
    right: 10px;
    bottom: -22px;

    width: 118px;
    height: 144px;

    opacity: .20;
  }
}

/* ============================================================
   END MUTATION — MOBILE PROMO FULL WIDTH CONTENT
   ============================================================ */


/* ============================================================
   MUTATION — MOBILE PROMO BADGE ABOVE TITLE
   Two-column mobile promo:
   content stack | action
   ============================================================ */

@media (max-width: 720px) {

  .service-dashboard__vehicle-promo-content {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    grid-template-areas:
      "badge action"
      "title action"
      "text  action";

    column-gap: 20px;
    row-gap: 7px;
    align-items: center;
  }


  .service-dashboard__vehicle-promo-badge {
    grid-area: badge;
    justify-self: start;
    align-self: end;
    margin:
      0
      0
      4px
      0;
  }


  .service-dashboard__vehicle-promo-title {
    grid-area: title;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }


  .service-dashboard__vehicle-promo-text {
    grid-area: text;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }


  .service-dashboard__vehicle-promo-action {
    grid-area: action;
    align-self: center;
    justify-self: end;
    margin: 0;
  }
}

/* ============================================================
   END MUTATION — MOBILE PROMO BADGE ABOVE TITLE
   ============================================================ */


/* ============================================================
   MUTATION — MOBILE PROMO CONTENT TIGHTEN
   Pull title/text closer to promo badge.
   ============================================================ */

@media (max-width: 720px) {

  .service-dashboard__vehicle-promo-content {
    row-gap: 3px;
  }

  .service-dashboard__vehicle-promo-badge {
    margin:
      0
      0
      1px
      0;
  }

  .service-dashboard__vehicle-promo-title {
    margin-top: -2px;
  }

  .service-dashboard__vehicle-promo-text {
    margin-top: 2px;
  }
}

/* ============================================================
   END MUTATION — MOBILE PROMO CONTENT TIGHTEN
   ============================================================ */


/* ============================================================
   MUTATION — DESKTOP PROMO BADGE ABOVE TITLE
   badge -> title -> text | action | visual
   Mobile layout remains owned by mobile mutations.
   ============================================================ */

@media (min-width: 721px) {

  .service-dashboard__vehicle-promo-content {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    grid-template-areas:
      "badge action"
      "title action"
      "text  action";

    align-items: center;
    column-gap: 24px;
    row-gap: 5px;

    min-width: 0;
  }


  .service-dashboard__vehicle-promo-badge {
    grid-area: badge;
    justify-self: start;
    align-self: end;

    margin:
      0
      0
      2px
      0;
  }


  .service-dashboard__vehicle-promo-title {
    grid-area: title;

    width: 100%;
    min-width: 0;
    max-width: none;

    margin: 0;
  }


  .service-dashboard__vehicle-promo-text {
    grid-area: text;

    width: 100%;
    min-width: 0;
    max-width: none;

    margin: 0;
  }


  .service-dashboard__vehicle-promo-action {
    grid-area: action;

    align-self: center;
    justify-self: end;

    margin: 0;
    white-space: nowrap;
  }
}

/* ============================================================
   END MUTATION — DESKTOP PROMO BADGE ABOVE TITLE
   ============================================================ */


/* ============================================================
   MUTATION — DARK PROMO SURFACE V2
   Shared dark surface for promo + secondary CTA.
   ============================================================ */

.service-dashboard__vehicle-promo {
  background: var(--mm-surface-dark);
}


.service-dashboard__vehicle-promo-title {
  color: #fff;
}


.service-dashboard__vehicle-promo-text {
  color: rgba(255, 255, 255, .62);
}


.service-dashboard__vehicle-promo-action {
  border: 0;
  background: var(--mm-cta-primary);
  color: #000;
}


.service-dashboard__vehicle-promo-action:hover {
  border: 0;
  background: var(--mm-cta-primary);
  color: #000;
}


/* decorative visual on dark surface */

/* ============================================================
   END MUTATION — DARK PROMO SURFACE V2
   ============================================================ */


/* ============================================================
   FILTER PICKER HUB — V4.1
   One section / three filter choices / shared picker.
   ============================================================ */


/* ---------- SHARED PICKER LANGUAGE ---------- */

.selection-picker__panel,
.filter-picker__panel {
  border: var(--mm-picker-panel-border);
  border-radius: var(--mm-picker-panel-radius);
  box-shadow: var(--mm-picker-panel-shadow);
}


.selection-picker__panel {
  background:
    var(--mm-picker-panel-bg);
}


.filter-picker__panel {
  background:
    var(--mm-picker-bg);
}


.selection-picker__backdrop,
.filter-picker__backdrop {
  background: var(--mm-picker-backdrop);
}


/* ============================================================
   HUB
   ============================================================ */

.filter-picker-hub {
  position: relative;
  min-width: 0;

  margin-top: 18px;

  padding: 15px;

  border:
    1px solid
    var(--mm-control-border);

  border-radius:
    var(--mm-radius-medium);

  background:
    var(--mm-control-surface);

  box-shadow:
    var(--mm-item-shadow);
}


.filter-picker-hub__head {
  margin-bottom: 11px;
  padding: 0 2px;
}


.filter-picker-hub__title {
  margin: 0;

  color:
    var(--mm-title-color);

  font-family:
    var(--font-body);

  font-size: var(--mm-section-title-size);
  line-height: var(--mm-section-title-line-height);
  font-weight: var(--mm-section-title-weight);

  letter-spacing: var(--mm-section-title-letter-spacing);
}


.filter-picker-hub__subtitle {
  margin: 4px 0 0;

  color:
    var(--mm-text-muted);

  font-family:
    var(--font-body);

  font-size: 10px;
  line-height: 1.35;
}


.filter-picker-hub__grid {
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 8px;
}


/* ============================================================
   HUB ITEMS
   Canonical filter picker trigger.
   One button / one border / one CTA-colored visual zone.
   ============================================================ */

.filter-picker-trigger {
  position: relative;

  min-width: 0;
  min-height: 72px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    68px;

  padding: 0;

  overflow: hidden;

  border:
    var(--mm-picker-trigger-border);

  border-radius:
    var(--mm-radius-control);

  background:
    var(--mm-control-surface);

  color:
    var(--mm-text);

  box-shadow: none;

  text-align: left;

  cursor: pointer;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}


.filter-picker-trigger:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(145,158,187,.56);

  box-shadow:
    var(--mm-item-shadow);
}


/* ------------------------------------------------------------
   CONTENT ROW
   ------------------------------------------------------------ */

.filter-picker-trigger__top {
  min-width: 0;

  grid-column:
    1 / -1;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    68px;

  align-items: stretch;
}


.filter-picker-trigger__identity {
  min-width: 0;

  display: grid;

  grid-template-columns:
    var(--mm-spec-icon-size)
    minmax(0, 1fr);

  grid-template-rows:
    auto
    auto;

  column-gap: 10px;
  row-gap: 4px;

  align-content: center;
  align-items: center;

  padding:
    10px
    14px;
}


/* ------------------------------------------------------------
   FILTER TYPE ICON
   ------------------------------------------------------------ */

.filter-picker-trigger
.catalog-spec__icon {
  grid-column: 1;
  grid-row: 1 / 3;

  align-self: center;
}

.filter-picker-trigger
.catalog-spec__icon svg {
  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.6;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.filter-picker-trigger__title {
  grid-column: 2;
  grid-row: 1;

  min-width: 0;

  align-self: end;

  overflow: hidden;

  color:
    var(--mm-text-secondary);

  font-family:
    var(--font-body);

  font-size: 10px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;

  white-space: nowrap;
  text-overflow: ellipsis;
}


/* ------------------------------------------------------------
   CTA-COLORED VISUAL ZONE
   Decorative only. Whole trigger remains one <button>.
   ------------------------------------------------------------ */

.filter-picker-trigger__chevron {
  width: 68px;
  min-width: 68px;

  display: flex;

  align-items: center;
  justify-content: center;

  align-self: stretch;

  border: 0;
  border-radius: 0;

  background:
    var(--mm-cta-primary);

  color:
    #000;

  transition:
    background-color .18s ease,
    color .18s ease;
}


.filter-picker-trigger__chevron-icon {
  display: block;

  width: 24px;
  height: 24px;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  transition:
    transform .18s ease;
}


.filter-picker-trigger:hover
.filter-picker-trigger__chevron-icon {
  transform:
    translateX(3px);
}


.filter-picker-trigger:active
.filter-picker-trigger__chevron-icon {
  transform:
    translateX(1px);
}


/* ------------------------------------------------------------
   META / CURRENT SELECTION
   ------------------------------------------------------------ */

.filter-picker-trigger__meta,
.filter-picker-trigger__selected {
  grid-column: 2;
  grid-row: 2;

  min-width: 0;

  align-self: start;

  margin: 0;

  overflow: hidden;

  color:
    var(--mm-title-color);

  font-family:
    var(--font-body);

  font-size: 13px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -.015em;

  white-space: nowrap;
  text-overflow: ellipsis;

  pointer-events: none;
}





.filter-picker-trigger__meta[hidden],
.filter-picker-trigger__selected[hidden] {
  display: none;
}


.filter-picker-trigger--selected {
  background:
    #fff;
}


/* ------------------------------------------------------------
   SELECTED VISUAL STATE
   Same button remains interactive.
   Yellow affordance -> dark confirmed state.
   ------------------------------------------------------------ */

.filter-picker-trigger--selected
.filter-picker-trigger__chevron {
  background:
    var(--mm-select-selected-bg);

  color:
    #fff;
}


.filter-picker-trigger--selected
.filter-picker-trigger__chevron-icon {
  display: none;
}


.filter-picker-trigger--selected
.filter-picker-trigger__chevron::after {
  content:
    "Выбрано";

  display:
    block;

  color:
    #fff;

  font-family:
    var(--font-body);

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    650;

  letter-spacing:
    -.01em;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 620px) {

  .filter-picker-trigger {
    min-height: 66px;

    grid-template-columns:
      minmax(0, 1fr)
      52px;
  }


  .filter-picker-trigger__top {
    grid-template-columns:
      minmax(0, 1fr)
      52px;
  }


  .filter-picker-trigger__identity {
    gap: 6px;

    padding:
      8px
      8px
      23px;
  }


  .filter-picker-trigger__icon {
    width: 24px;
    height: 24px;

    flex-basis: 24px;

    border-radius: 7px;
  }


  .filter-picker-trigger__icon svg {
    width: 14px;
    height: 14px;
  }


  .filter-picker-trigger__title {
    font-size: 10px;

    white-space: normal;
  }


  .filter-picker-trigger__chevron {
    width: 52px;
    min-width: 52px;
  }


  .filter-picker-trigger__chevron-icon {
    width: 20px;
    height: 20px;
  }


  .filter-picker-trigger--selected
  .filter-picker-trigger__chevron::after {
    font-size: 9px;
  }


  .filter-picker-trigger__meta,
  .filter-picker-trigger__selected {
    left: 38px;
    right: 59px;
    bottom: 8px;

    font-size: 8px;
  }

}


/* ============================================================
   PICKER
   ============================================================ */

.filter-picker {
  position: fixed;

  z-index: 10000;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 28px;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity .18s ease;
}


.filter-picker[hidden] {
  display: none;
}


.filter-picker--open {
  opacity: 1;

  pointer-events: auto;
}


.filter-picker__backdrop {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  padding: 0;

  border: 0;

  -webkit-backdrop-filter:
    blur(4px);

  backdrop-filter:
    blur(4px);
}


.filter-picker__panel {
  position: relative;

  z-index: 2;

  width:
    min(
      1180px,
      calc(100vw - 56px)
    );

  max-height:
    min(
      840px,
      calc(100vh - 56px)
    );

  min-width: 0;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  opacity: 0;

  transform:
    translateY(10px)
    scale(.995);

  transition:
    opacity .2s ease,
    transform .22s ease;
}


.filter-picker--open
.filter-picker__panel {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* ---------- PICKER HEADER ---------- */

.filter-picker__header {
  flex: 0 0 auto;

  min-width: 0;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding:
    22px
    24px
    18px;

  border-bottom:
    1px solid
    var(--mm-control-border);
}


.filter-picker__header-text {
  min-width: 0;
}


.filter-picker__kicker {
  display: block;

  margin-bottom: 6px;

  color:
    var(--mm-text-muted);

  font-family:
    var(--font-body);

  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;

  letter-spacing: .10em;

  text-transform: uppercase;
}


.filter-picker__title {
  margin: 0;

  color:
    var(--mm-title-color);

  font-family:
    var(--font-body);

  font-size: var(--mm-section-title-size);
  line-height: var(--mm-section-title-line-height);
  font-weight: var(--mm-section-title-weight);

  letter-spacing: var(--mm-section-title-letter-spacing);
}


.filter-picker__meta {
  margin-top: 5px;

  color:
    var(--mm-text-muted);

  font-family:
    var(--font-body);

  font-size: 10px;
}


.filter-picker__close {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  border:
    1px solid
    var(--mm-control-border);

  border-radius: 50%;

  background:
    var(--mm-control-surface);

  color:
    var(--mm-text);

  font-size: 24px;
  line-height: 1;

  cursor: pointer;
}


/* ---------- PICKER BODY ---------- */

.filter-picker__body {
  min-height: 0;

  flex: 1 1 auto;

  display: flex;

  align-items: center;

  overflow: hidden;

  padding: 22px;
}


.filter-picker__viewport {
  min-width: 0;

  width: 100%;

  overflow: visible;

  padding:
    5px
    2px
    13px;
}


.filter-picker__list {
  width: 100%;

  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  align-items: stretch;

  gap: 9px;
}


/* ============================================================
   APPROVED COMPACT FILTER CARDS
   ============================================================ */

.filter-picker
.filter-choice-row {
  width: 100%;

  min-width: 0;

  min-height: 116px;

  display: grid;

  grid-template-columns:
    82px
    minmax(0, 1fr);

  grid-template-rows:
    auto
    auto
    auto;

  grid-template-areas:
    "media info"
    "media price"
    "media action";

  column-gap: 10px;

  padding: 8px;

  border:
    var(--mm-picker-card-border);

  border-radius:
    var(--mm-radius-medium);

  background:
    var(--mm-picker-card-bg);

  box-shadow:
    var(--mm-picker-card-shadow);

}


.filter-picker
.filter-choice-row__media {
  grid-area: media;

  width: 82px;

  height: 100%;

  min-height: 98px;

  padding: 6px;
}


.filter-picker
.filter-choice-row__image {
  max-width: 72px;
  max-height: 80px;
}


.filter-picker
.filter-choice-row__info {
  grid-area: info;

  padding:
    3px
    2px
    5px;
}


.filter-picker
.filter-choice-row__name {
  font-size: 11px;
  line-height: 1.25;

  -webkit-line-clamp: 2;
}


.filter-picker
.filter-choice-row__price {
  grid-area: price;

  align-self: end;

  margin: 0;

  padding:
    6px
    2px
    5px;
}


.filter-picker
.filter-choice-row__total {
  font-size: 13px;
}


.filter-picker
.filter-choice-row__action {
  grid-area: action;

  padding-top: 5px;
}


.filter-picker
.filter-choice-row
.filter-choice-row__select {
  min-height: 32px;

  padding:
    0
    10px;
}


/* ---------- EMPTY ---------- */

.filter-picker__empty {
  width: 100%;

  padding: 24px;

  border:
    1px solid
    var(--mm-control-border);

  border-radius:
    var(--mm-radius-medium);

  background:
    var(--mm-control-surface);

  color:
    var(--mm-text-secondary);

  text-align: center;
}


/* ---------- LOCK ---------- */

html.filter-picker-lock,
html.filter-picker-lock body {
  overflow: hidden;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 621px) and (max-width: 980px) {

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

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .filter-picker-hub {
    margin-top: 12px;

    padding: 10px;
  }


  .filter-picker-hub__head {
    margin-bottom: 8px;
  }


  .filter-picker-hub__title {
    font-size: var(--mm-section-title-size-mobile);
  }


  .filter-picker-hub__subtitle {
    font-size: 9px;
  }


  .filter-picker-hub__grid {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 8px;
  }


  .filter-picker-trigger {
    min-height: 64px;

    grid-template-columns:
      minmax(0, 1fr)
      72px;

    padding: 0;
  }


  .filter-picker-trigger__top {
    grid-template-columns:
      minmax(0, 1fr)
      72px;
  }


  .filter-picker-trigger__identity {
    grid-template-columns:
      var(--mm-spec-icon-mobile-size)
      minmax(0, 1fr);

    column-gap: 9px;
    row-gap: 3px;

    padding:
      9px
      12px;
  }


  .filter-picker-trigger__icon {
    width: 26px;
    height: 26px;

    flex:
      0
      0
      26px;

    border-radius:
      8px;
  }


  .filter-picker-trigger__icon svg {
    width: 15px;
    height: 15px;
  }


  .filter-picker-trigger__title {
    font-size: 9.5px;
    line-height: var(--mm-section-title-line-height);

    white-space: nowrap;
    text-overflow: ellipsis;
  }


  .filter-picker-trigger__meta,
  .filter-picker-trigger__selected {
    margin: 0;

    font-size: 12px;
    line-height: var(--mm-section-title-line-height);

    white-space: nowrap;
    text-overflow: ellipsis;
  }


  .filter-picker-trigger__meta[hidden],
  .filter-picker-trigger__selected[hidden] {
    display: none;
  }


  .filter-picker-trigger__chevron {
    width: 72px;
    min-width: 72px;
    height: auto;

    flex-basis: auto;

    align-self: stretch;

    font-size: inherit;
  }


  .filter-picker-trigger__chevron-icon {
    width: 21px;
    height: 21px;
  }


  .filter-picker-trigger--selected
  .filter-picker-trigger__chevron::after {
    font-size: 9px;
  }


  /* TRUE FULLSCREEN */

  .filter-picker {
    padding: 0;
  }


  .filter-picker__panel {
    width: 100%;
    height: 100%;

    max-height: none;

    border: 0;

    border-radius: 0;
  }


  .filter-picker__header {
    padding:
      16px
      16px
      13px;
  }


  .filter-picker__title {
    font-size: var(--mm-section-title-size);
  }


  .filter-picker__close {
    width: 36px;
    height: 36px;

    flex-basis: 36px;
  }


  .filter-picker__body {
    padding:
      14px
      12px
      18px;
  }


  .filter-picker__list {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 7px;
  }


  .filter-picker
  .filter-choice-row {
    width: 100%;

    min-width: 0;

    grid-template-columns:
      76px
      minmax(0, 1fr);

    column-gap: 9px;

    padding: 7px;
  }


  .filter-picker
  .filter-choice-row__media {
    width: 76px;

    min-height: 92px;
  }


  .filter-picker
  .filter-choice-row__image {
    max-width: 66px;
    max-height: 73px;
  }
}


/* ============================================================
   END FILTER PICKER HUB — V4.1
   ============================================================ */


/* ============================================================
   FILTER PICKER HUB — SINGLE SECTION / FIT CONTENT V4.2
   One catalog section for all filter types.
   Popup height follows its content.
   ============================================================ */


/* ------------------------------------------------------------
   ONE OUTER CATALOG SECTION
   ------------------------------------------------------------ */

.catalog-section--filters
.filter-picker-hub {
  width: 100%;
  margin-top: 0;
}


/* ------------------------------------------------------------
   DESKTOP / TABLET PICKER
   Kill inherited V3 full-height geometry.
   ------------------------------------------------------------ */

@media (min-width: 621px) {

  .filter-picker__panel {
    height: auto;
    min-height: 0;

    max-height:
      calc(100vh - 80px);
  }


  .filter-picker__body {
    flex:
      0
      1
      auto;

    min-height: 0;

    padding:
      18px
      22px
      20px;
  }


  .filter-picker__viewport {
    flex:
      0
      1
      auto;

    min-height: 0;
  }


  .filter-picker__list {
    min-height: 0;
  }
}


/* ------------------------------------------------------------
   MOBILE
   Also content-driven instead of forced 100vh.
   Becomes a large modal sheet, not an empty fullscreen canvas.
   ------------------------------------------------------------ */

@media (max-width: 620px) {

  .filter-picker {
    align-items: center;

    padding:
      12px;
  }


  .filter-picker__panel {
    width: 100%;

    height: auto;
    min-height: 0;

    max-height:
      calc(100dvh - 24px);

    margin: 0;

    border:
      var(--mm-picker-panel-border);

    border-radius:
      20px;
  }


  .filter-picker__body {
    flex:
      0
      1
      auto;

    min-height: 0;

    padding:
      14px
      12px
      16px;
  }
}


/* ============================================================
   END FILTER PICKER HUB — SINGLE SECTION / FIT CONTENT V4.2
   ============================================================ */


/* ============================================================
   FILTER PICKER HUB — KEEP OUTER SECTION V4.4
   Outer catalog section remains.
   Only intermediate hub wrapper is removed.
   ============================================================ */

.catalog-section--filters {
  width: 100%;
  min-height: 0;

  margin-top: 22px;

  padding: 22px;

  border:
    var(--mm-section-border);

  border-radius:
    var(--mm-radius-large);

  background:
    rgb(255, 255, 255);

  box-shadow:
    0 10px 20px rgba(165,177,202,.3),
    0 3px 6px rgba(165,177,202,.3);

  transition:
    all .2s ease-in;
}


/*
 * V4.3 used the outer section itself as .filter-picker-hub.
 * After V4.4 that class is no longer added.
 */

.catalog-section--filters.filter-picker-hub {
  margin-top: 22px;
}


@media (max-width: 620px) {

  .catalog-section--filters {
    margin-top: 12px;
    padding: 10px;
  }

}

/* ============================================================
   END FILTER PICKER HUB — KEEP OUTER SECTION V4.4
   ============================================================ */

/* ============================================================
   SELECTED SHADOW — CANONICAL CONSUMERS
   ============================================================ */

/* Recommended oil
   Recommended product is active by default. */

.recommended-oil-row:has(
  .recommended-oil-row__select[aria-pressed="true"]
),
.recommended-oil-row:has(
  .recommended-oil-row__select[aria-pressed="true"]
):hover {
  box-shadow:
    var(--mm-selected-shadow);
}


/* Filter product card */

.filter-choice-row.catalog-product--selected,
.filter-choice-row.catalog-product--selected:hover {
  box-shadow:
    var(--mm-selected-shadow);
}


/* Filter picker trigger */

.filter-picker-trigger--selected
.filter-picker-trigger__top {
  box-shadow:
    var(--mm-selected-shadow);
}


/* ============================================================
   END SELECTED SHADOW — CANONICAL CONSUMERS
   ============================================================ */

/* ============================================================
   SECTION TITLE ICONS — CANONICAL
   Functional section headings:
   oils / filters / calculator.
   ============================================================ */

.oil-choice__title,
.filter-picker-hub__title,
.catalog-calculator__title {
  display: flex;
  align-items: center;
  gap: 10px;
}


.section-title__icon {
  flex:
    0
    0
    var(--mm-spec-icon-size);
}


.section-title__icon svg {
  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.6;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.section-title__text {
  min-width: 0;
}


@media (max-width: 620px) {

  .oil-choice__title,
  .filter-picker-hub__title,
  .catalog-calculator__title {
    gap: 9px;
  }


  .section-title__icon {
    flex-basis:
      var(--mm-spec-icon-mobile-size);
  }

}


/* ============================================================
   END SECTION TITLE ICONS — CANONICAL
   ============================================================ */

/* ============================================================
   FILTER PICKER — AUTO SELECTED CHEVRON LABEL
   ============================================================ */

.filter-picker-trigger--auto-selected
.filter-picker-trigger__chevron::after {
  content: "Выбрано\A автоматически";
  white-space: pre-line;
  text-align: center;
  line-height: 1.15;
}

/* ============================================================
   END FILTER PICKER — AUTO SELECTED CHEVRON LABEL
   ============================================================ */

/* ============================================================
   FILTER PICKER — SELECTED CHEVRON WIDTH
   Wider horizontal status zone, height untouched.
   ============================================================ */

.filter-picker-trigger--selected
.filter-picker-trigger__top {
  grid-template-columns:
    minmax(0, 1fr)
    30%;
}

.filter-picker-trigger--selected
.filter-picker-trigger__chevron {
  width: 100%;
  min-width: 0;
}


/* ============================================================
   END FILTER PICKER — SELECTED CHEVRON WIDTH
   ============================================================ */



/* ============================================================
   MOBILE VEHICLE PICKER VISIBILITY
   Desktop selector stays intact.
   Mobile uses vehicle-progress as the selection interface.
   ============================================================ */

@media (max-width: 620px) {

  .vehicle-picker {
    display: none;
  }

}

/* ============================================================
   END MOBILE VEHICLE PICKER VISIBILITY
   ============================================================ */



/* ============================================================
   MOBILE VEHICLE EDIT SHEET V1
   Secondary back-navigation for the mobile vehicle selector.
   ============================================================ */

.vehicle-progress__edit {
  display: none;
}


@media (max-width: 620px) {

  .vehicle-progress__edit {
    width: 100%;

    margin:
      26px
      0
      0;

    padding:
      9px
      12px;

    display: block;

    border:
      1px solid
      var(--mm-info-border);

    border-radius:
      11px;

    background:
      transparent;

    color:
      var(--mm-info-color);

    font-family:
      var(--font-body);

    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;

    text-align: center;

    cursor: pointer;

    -webkit-tap-highlight-color:
      transparent;
  }


  .vehicle-progress__edit[hidden] {
    display: none;
  }


  .vehicle-progress__edit:active {
    background:
      var(--mm-info-surface);
  }


  body.vehicle-edit-sheet-open {
    overflow: hidden;
  }


  .vehicle-edit-sheet {
    position: fixed;
    inset: 0;

    z-index: 1200;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding:
      18px
      12px;

    pointer-events: none;
  }


  .vehicle-edit-sheet[hidden] {
    display: none;
  }


  .vehicle-edit-sheet__backdrop {
    position: absolute;
    inset: 0;

    background:
      rgba(10,22,38,.32);

    opacity: 0;

    transition:
      opacity 180ms ease;
  }


  .vehicle-edit-sheet__panel {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 520px;

    padding:
      18px;

    border:
      1px solid
      var(--mm-border);

    border-radius:
      20px;

    background:
      #fff;

    box-shadow:
      0 20px 50px
      rgba(10,22,38,.20);

    transform:
      translateY(22px);

    opacity: 0;

    transition:
      transform 180ms ease,
      opacity 180ms ease;
  }


  .vehicle-edit-sheet--open {
    pointer-events: auto;
  }


  .vehicle-edit-sheet--open
  .vehicle-edit-sheet__backdrop {
    opacity: 1;
  }


  .vehicle-edit-sheet--open
  .vehicle-edit-sheet__panel {
    transform:
      translateY(0);

    opacity: 1;
  }


  .vehicle-edit-sheet__header {
    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    padding:
      0
      48px
      14px
      0;
  }


  .vehicle-edit-sheet__kicker {
    margin-bottom: 3px;

    color:
      var(--mm-text-muted);

    font-size: 10px;
    line-height: 1.2;

    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .05em;
  }


  .vehicle-edit-sheet__title {
    margin: 0;

    color:
      var(--mm-title-color);

    font-family:
      var(--font-body);

    font-size: 20px;
    line-height: 1.2;

    font-weight: 760;
  }


  .vehicle-edit-sheet__close {
    position: absolute;

    top: -2px;
    right: 0;

    width: 36px;
    height: 36px;

    padding: 0;

    border:
      1px solid
      var(--mm-border);

    border-radius: 50%;

    background:
      var(--mm-surface-soft);

    cursor: pointer;
  }


  .vehicle-edit-sheet__close span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 13px;
    height: 1.5px;

    border-radius: 2px;

    background:
      var(--mm-text);

    transform-origin: center;
  }


  .vehicle-edit-sheet__close
  span:first-child {
    transform:
      translate(-50%, -50%)
      rotate(45deg);
  }


  .vehicle-edit-sheet__close
  span:last-child {
    transform:
      translate(-50%, -50%)
      rotate(-45deg);
  }


  .vehicle-edit-sheet__list {
    display: grid;
    gap: 7px;
  }


  .vehicle-edit-sheet__item {
    width: 100%;

    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding:
      10px
      12px;

    border:
      1px solid
      var(--mm-border);

    border-radius:
      var(--mm-radius-control);

    background:
      var(--mm-control-surface-strong);

    color:
      var(--mm-text);

    font-family:
      var(--font-body);

    text-align: left;
  }


  .vehicle-edit-sheet__item--action {
    cursor: pointer;

    -webkit-tap-highlight-color:
      transparent;
  }


  .vehicle-edit-sheet__item--action:active {
    background:
      var(--mm-info-surface);
  }


  .vehicle-edit-sheet__item--locked {
    opacity: .66;
  }


  .vehicle-edit-sheet__item-text {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
  }


  .vehicle-edit-sheet__item-label {
    color:
      var(--mm-text-muted);

    font-size: 9.5px;
    line-height: 1.2;

    font-weight: 650;

    text-transform: uppercase;

    letter-spacing: .035em;
  }


  .vehicle-edit-sheet__item-value {
    min-width: 0;

    color:
      var(--mm-title-color);

    font-size: 13px;
    line-height: 1.25;

    font-weight: 720;
  }


  .vehicle-edit-sheet__item-meta {
    flex:
      0
      0
      auto;

    color:
      var(--mm-info-color);

    font-size: 10px;
    line-height: 1.2;

    font-weight: 700;

    white-space: nowrap;
  }


  .vehicle-edit-sheet__item--locked
  .vehicle-edit-sheet__item-meta {
    color:
      var(--mm-text-muted);
  }

}


@media (prefers-reduced-motion: reduce) {

  .vehicle-edit-sheet__backdrop,
  .vehicle-edit-sheet__panel {
    transition: none;
  }

}

/* ============================================================
   END MOBILE VEHICLE EDIT SHEET V1
   ============================================================ */

/* ============================================================
   BRAND PICKER — STABLE FILTER HEIGHT

   Keep outer picker geometry stable while brand finder
   changes the amount of rendered cards.

   Only brand-picker is affected.
   selection-picker keeps its existing content-driven height.
   ============================================================ */

.brand-picker__panel {
  height:
    min(
      840px,
      calc(100dvh - 56px)
    );

  max-height:
    min(
      840px,
      calc(100dvh - 56px)
    );
}


@media (max-width: 800px) {

  .brand-picker__panel {
    height:
      calc(100dvh - 36px);

    max-height:
      calc(100dvh - 36px);
  }

}


@media (max-width: 620px) {

  .brand-picker__panel {
    height:
      calc(100dvh - 16px);

    max-height:
      calc(100dvh - 16px);
  }

}

/* ============================================================
   END BRAND PICKER — STABLE FILTER HEIGHT
   ============================================================ */

/* === POPULAR VEHICLES V1 === */

.popular-vehicles {
  margin-top: 34px;
  padding: 30px;

  background:
    var(--mm-surface);

  border:
    1px solid var(--mm-border);

  border-radius:
    24px;
}

.popular-vehicles__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;

  margin-bottom: 22px;
}

.popular-vehicles__kicker {
  margin-bottom: 7px;

  color:
    var(--text-muted);

  font-size: 12px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .08em;
}

.popular-vehicles__title {
  margin: 0;

  color:
    var(--text-main);

  font-family:
    var(--font-body);

  font-size: 24px;
  line-height: 1.2;

  font-weight: 650;
  letter-spacing: -0.02em;
}

.popular-vehicles__lead {
  max-width: 680px;

  margin:
    10px
    0
    0;

  color:
    var(--text-muted);

  font-size: 14px;
  line-height: 1.55;
}

.popular-vehicles__brands {
  display: flex;
  gap: 10px;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  padding:
    2px
    2px
    12px;

  scrollbar-width: thin;
}

.popular-vehicles__brand {
  flex:
    0
    0
    auto;

  min-width: 104px;
  height: 58px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  padding:
    0
    14px;

  border:
    1px solid var(--mm-border);

  border-radius:
    14px;

  background:
    var(--mm-surface);

  color:
    var(--text-main);

  cursor: pointer;
}

.popular-vehicles__brand--active {
  background:
    var(--mm-surface-dark);

  color:
    #fff;

  border-color:
    var(--mm-surface-dark);
}

.popular-vehicles__brand-logo {
  display: block;

  width: auto;
  max-width: 38px;
  height: 22px;

  object-fit: contain;
}

.popular-vehicles__brand--active
.popular-vehicles__brand-logo {
  filter:
    brightness(0)
    invert(1);
}

.popular-vehicles__brand-name {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.popular-vehicles__models {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 12px;

  margin-top: 6px;
}

.popular-vehicle-card {
  min-width: 0;

  display: grid;

  grid-template-columns:
    minmax(128px, .72fr)
    minmax(0, 1.6fr);

  grid-template-areas:
    "header header"
    "identity content";

  column-gap: 16px;
  row-gap: 12px;

  align-items: stretch;

  padding:
    16px;

  text-align: left;

  border:
    1px solid var(--mm-border);

  border-radius:
    18px;

  background:
    var(--mm-surface-soft);

  color:
    var(--text-main);

  cursor: pointer;
}

.popular-vehicle-card__header {
  grid-area: header;

  min-width: 0;

  display: flex;
  align-items: baseline;
  justify-content: space-between;

  gap: 14px;
}

.popular-vehicle-card__identity {
  grid-area: identity;

  min-width: 0;

  display: flex;
  flex-direction: column;
}

.popular-vehicle-card__title {
  display: flex;
  align-items: baseline;
  gap: 7px;

  min-width: 0;

  flex:
    1
    1
    auto;
}

.popular-vehicle-card__mark {
  flex:
    0
    0
    auto;

  color:
    var(--text-muted);

  font-size: 18px;
  line-height: 1.15;

  font-weight: 750;
}

.popular-vehicle-card__model {
  min-width: 0;

  font-size: 18px;
  line-height: 1.15;

  font-weight: 750;
}

.popular-vehicle-card__engine {
  flex:
    0
    0
    auto;

  color:
    var(--text-muted);

  font-size: 12px;
  line-height: 1.35;

  white-space: nowrap;
}

.popular-vehicle-card__visual {
  width: 100%;
  height: 96px;

  margin-top: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding:
    8px
    10px;

  box-sizing:
    border-box;

  border-radius:
    14px;

  background:
    #fff;
}

.popular-vehicle-card__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.popular-vehicle-card__content {
  grid-area: content;

  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 16px;

  justify-content: center;
}

.popular-vehicle-card__products {
  min-width: 0;

  display: grid;
  gap: 12px;
}

.popular-vehicle-card__product {
  min-width: 0;

  display: grid;
  gap: 2px;
}

.popular-vehicle-card__product-label {
  color:
    var(--text-muted);

  font-size: 10px;
  line-height: 1.25;

  text-transform: uppercase;
  letter-spacing: .05em;
}

.popular-vehicle-card__product-value {
  min-width: 0;

  font-size: 12px;
  line-height: 1.35;

  white-space: normal;
  overflow-wrap: break-word;
}

.popular-vehicle-card__action {
  align-self: flex-end;

  white-space: nowrap;

  padding:
    10px
    12px;

  border-radius:
    10px;

  background:
    var(--mm-surface-dark);

  color:
    #fff;

  font-size: 11px;
  font-weight: 700;
}

.popular-vehicles__loading {
  grid-column:
    1 / -1;

  min-height: 120px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(--text-muted);

  font-size: 13px;
}


@media (max-width: 620px) {

  .popular-vehicles {
    margin-top: 24px;

    padding:
      22px
      15px;

    border-radius:
      20px;
  }

  .popular-vehicles__head {
    margin-bottom: 18px;
  }

  .popular-vehicles__lead {
    font-size: 13px;
  }

  .popular-vehicles__brands {
    margin-right: -15px;

    padding-right: 15px;

    scroll-snap-type:
      x
      proximity;
  }

  .popular-vehicles__brand {
    min-width: 92px;
    height: 54px;

    scroll-snap-align: start;
  }

  .popular-vehicles__brand-name {
    display: none;
  }

  .popular-vehicles__brand-logo {
    max-width: 46px;
    height: 24px;
  }

  .popular-vehicles__models {
    display: flex;

    gap: 12px;

    overflow-x: auto;
    overscroll-behavior-inline: contain;

    margin-right: -15px;

    padding:
      2px
      15px
      8px
      1px;

    scroll-snap-type:
      x
      mandatory;

    scrollbar-width: none;
  }

  .popular-vehicles__models::-webkit-scrollbar {
    display: none;
  }

  .popular-vehicle-card {
    flex:
      0
      0
      min(84vw, 330px);

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 16px;

    padding:
      18px;

    scroll-snap-align:
      start;
  }

  .popular-vehicle-card__mark,
  .popular-vehicle-card__model {
    font-size: 19px;
  }

  .popular-vehicle-card__content {
    width: 100%;

    gap: 14px;
  }

  .popular-vehicle-card__visual {
    height: 118px;

    margin-top: 10px;
  }

  .popular-vehicle-card__product-value {
    white-space: normal;
  }

  .popular-vehicle-card__action {
    align-self: stretch;

    text-align: center;

    padding:
      12px;
  }
}

/* === SERVICE PROMO V2 === */

.service-promo {
  position: relative;

  margin-top: 22px;
  padding: 28px 30px;

  box-sizing: border-box;

  overflow: hidden;

  border:
    var(--mm-section-border);

  border-radius:
    24px;

  background:
    var(--mm-surface-dark);

  box-shadow:
    0 10px 20px rgba(165,177,202,.3),
    0 3px 6px rgba(165,177,202,.3);

  color:
    #fff;
}

.service-promo__body {
  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(400px, .88fr);

  gap: 20px;

  min-height: 360px;

  align-items: stretch;
}

.service-promo__content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: flex-start;

  padding:
    54px
    0
    18px;

  box-sizing: border-box;
}

.service-promo__copy {
  min-width: 0;

  text-align: left;
}

.service-promo__kicker {
  margin-bottom: 10px;

  color:
    #fff;

  font-family:
    var(--font-body);

  font-size:
    clamp(36px, 4vw, 54px);

  line-height: 1.03;

  font-weight: 760;

  letter-spacing: -.035em;
}

.service-promo__title {
  margin: 0;

  color:
    #fff;

  font-family:
    var(--font-body);

  font-size:
    clamp(36px, 4vw, 54px);

  line-height: 1.03;

  font-weight: 760;

  letter-spacing: -.035em;
}

.service-promo__title-accent {
  color:
    var(--mm-cta-primary);

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--mm-cta-primary) 48%,
        #fff
      )
      0%,
      var(--mm-cta-primary)
      100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;
}

.service-promo__lead {
  max-width: 680px;

  margin:
    20px
    0
    0;

  color:
    rgba(255,255,255,.72);

  font-family:
    var(--font-body);

  font-size: 15px;
  line-height: 1.55;
}

.service-promo__details {
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-top: 18px;
}

.service-promo__details[hidden] {
  display: none;
}

.service-promo__detail {
  min-width: 0;

  padding:
    11px
    12px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:
    13px;

  background:
    rgba(255,255,255,.055);
}

.service-promo__detail-label {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(255,255,255,.5);

  font-size: 9px;
  line-height: 1.25;

  font-weight: 700;

  letter-spacing: .05em;
  text-transform: uppercase;
}

.service-promo__detail-value {
  display: block;

  color:
    #fff;

  font-size: 11px;
  line-height: 1.35;

  font-weight: 650;

  overflow-wrap: break-word;
}

.service-promo__benefits {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 14px;

  margin-top: auto;

  padding-top: 28px;
}

.service-promo__benefit {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;
}

.service-promo__benefit-icon {
  flex:
    0
    0
    auto;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;

  border-radius:
    10px;

  background:
    #fff;

  box-shadow:
    none;

  color:
    var(--mm-surface-dark);
}

.service-promo__benefit-icon svg {
  width: 22px;
  height: 22px;

  display: block;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.service-promo__benefit-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}

.service-promo__benefit-text strong {
  color:
    #fff;

  font-size: 13px;
  line-height: 1.25;

  font-weight: 700;
}

.service-promo__benefit-text span {
  color:
    rgba(255,255,255,.5);

  font-size: 13px;
  line-height: 1.3;
}

.service-promo__visual {
  position: relative;

  min-height: 360px;
}

.service-promo__oil {
  position: absolute;

  z-index: 1;

  top: -20px;
  right: -20px;

  width:
    min(550px, 100%);

  max-width: none;

  pointer-events: none;
  user-select: none;
}

.service-promo__car {
  position: absolute;

  z-index: 2;

  right: 3%;
  bottom: 42px;

  width:
    min(430px, 84%);

  max-width: none;

  pointer-events: none;
  user-select: none;
}

.service-promo__action {
  position: absolute;

  z-index: 3;

  left: 50%;
  bottom: 8px;

  transform:
    translateX(-50%);

  width:
    min(450px, 90%);

  min-height: 46px;

  box-sizing:
    border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 13px;

  padding:
    0
    16px;

  white-space: nowrap;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius:
    13px;

  background:
    #fff;

  color:
    var(--mm-surface-dark);

  font-family:
    var(--font-body);

  font-size: 12px;
  font-weight: 750;

  cursor: pointer;
}

.service-promo__action-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  border-radius: 50%;

  background:
    var(--mm-surface-dark);

  color:
    #fff;

  font-size: 16px;
  line-height: 1;
}


@media (max-width: 900px) and (min-width: 621px) {

  .service-promo__body {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, .82fr);

    gap: 20px;
  }

  .service-promo__benefits {
    grid-template-columns:
      1fr;

    gap: 9px;
  }

  .service-promo__visual {
    min-height: 250px;
  }

  .service-promo__oil {
    right: -60px;
  }
}


@media (max-width: 620px) {

  .service-promo {
    margin-top: 16px;

    padding:
      20px
      16px
      18px;

    border-radius:
      20px;
  }

  .service-promo__body {
    display: flex;

    flex-direction: column;

    gap: 18px;
  }

  .service-promo__content {
    display: contents;
  }

  .service-promo__copy {
    text-align: left;
  }

  .service-promo__title {
    font-size: 30px;
  }

  .service-promo__lead {
    font-size: 13px;
  }

  .service-promo__details {
    grid-template-columns:
      1fr;

    gap: 8px;

    margin-top: 0;
  }

  .service-promo__benefits {
    order: 3;

    grid-template-columns:
      1fr;

    gap: 10px;

    margin-top: 0;
  }

  .service-promo__visual {
    order: 2;

    min-height: 225px;

    padding-bottom: 54px;
  }

  .service-promo__oil {
    top: -18px;
    right: -11px;

    width: 350px;
  }

  .service-promo__car {
    right: 50%;

    width:
      min(320px, 94%);

    transform:
      translateX(50%);
  }

  .service-promo__action {
    left: 0;
    right: 0;

    width: 100%;

    min-height: 50px;

    transform: none;

    box-sizing:
      border-box;

    justify-content:
      space-between;
  }

  .service-promo__benefit-icon {
    width: 32px;
    height: 32px;
  }
}

/* ============================================================

   OIL FAMILY — ENGINEERING PRODUCT CARD V1

   Visual language follows vehicle-picker,
   but owns its responsive behaviour independently.

   ============================================================ */

.oil-page {
  width: 100%;
  min-width: 0;
}

.oil-family-page {
  position: relative;
  overflow: visible;
  margin-top: 28px;
  padding: 26px;

  border:
    var(--mm-section-border);

  border-radius: 32px;

  background:
    rgb(255, 255, 255);

  box-shadow:
    0 10px 20px rgba(165,177,202,.3),
    0 3px 6px rgba(165,177,202,.3);
}


/* ------------------------------------------------------------
   BREADCRUMBS
   ------------------------------------------------------------ */

.site-breadcrumbs {
  width: 100%;
  min-width: 0;

  margin:
    0
    0
    20px;

  padding: 0;

  display: flex;
  align-items: center;

  gap: 14px;

  color:
    var(--mm-text-secondary);

  font-size: 13px;
  line-height: 1.45;

  white-space: nowrap;
}

.site-breadcrumbs a {
  color:
    var(--mm-text-secondary);

  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.site-breadcrumbs a:hover {
  color:
    var(--mm-title-color);
}

.site-breadcrumbs__separator {
  flex:
    0
    0
    auto;

  color:
    var(--mm-text-disabled);

  font-size: 24px;
  line-height: 1;

  font-weight: 300;
}

.site-breadcrumbs__current {
  min-width: 0;

  color:
    var(--mm-title-color);

  font-weight: 750;
}


/* ------------------------------------------------------------
   HERO GRID
   ------------------------------------------------------------ */

.oil-product-hero {
  display: grid;

  grid-template-columns:
    minmax(300px, .76fr)
    minmax(0, 1.24fr);

  align-items: stretch;

  gap: 42px;

  min-width: 0;
}


/* ------------------------------------------------------------
   VISUAL
   ------------------------------------------------------------ */

.oil-product-hero__visual {
  min-width: 0;
  min-height: 480px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    28px
    24px;

  overflow: hidden;

  border-radius: 24px;

  background:
    var(--mm-popup-bg);
}

.oil-product-hero__image {
  display: block;

  width: 100%;
  max-width: 430px;
  height: 430px;

  object-fit: contain;
  object-position: center;

  margin: auto;
}


/* ------------------------------------------------------------
   PRODUCT CONTENT
   ------------------------------------------------------------ */

.oil-product-hero__content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-self: center;

  padding:
    18px
    8px
    18px
    0;
}


/* meta */

.oil-product-hero__meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;

  gap: 30px;

  margin-top: 8px;
  margin-bottom: 20px;
}

.oil-product-hero__info-icon {
  width: 32px;
  height: 32px;

  flex:
    0
    0
    32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;

  border-radius:
    10px;

  background:
    var(--mm-control-surface-strong);

  color:
    var(--mm-text);

  box-shadow: none;
}

.oil-product-hero__info-icon svg {
  width: 16px;
  height: 16px;

  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oil-product-hero__info-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 3px;

  min-width: 0;
}

.oil-product-hero__info-label {
  color: var(--mm-text-disabled);

  font-size: 11px;
  line-height: 1.2;

  font-weight: 600;

  letter-spacing: .04em;
  text-transform: uppercase;
}

.oil-product-hero__info-value {
  color: var(--mm-text);

  font-size: 11px;
  line-height: 1.25;

  font-weight: 600;

  letter-spacing: -0.01em;
}


.oil-product-hero__meta-text {
  color: var(--mm-text);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* brand */

.oil-product-hero__title-row {
  display: flex;
  align-items: center;

  gap: 20px;

  min-width: 0;

  margin-bottom: 12px;
}

.oil-product-hero__live-viewers {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;

  gap: 6px;

  margin:
    -2px
    0
    10px;

  color:
    var(--mm-text-secondary);

  font-size: 11px;
  line-height: 1.3;

  font-weight: 500;
}

.oil-product-hero__live-viewers[hidden] {
  display: none;
}

.oil-product-hero__live-viewers-icon {
  width: 15px;
  height: 15px;

  flex:
    0
    0
    15px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color:
    var(--mm-text-secondary);
}

.oil-product-hero__live-viewers-icon svg {
  display: block;

  width: 15px;
  height: 15px;

  max-width: 15px;
  max-height: 15px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oil-product-hero__live-viewers-text {
  min-width: 0;
}


.oil-product-hero__brand {
  display: flex;
  align-items: center;

  min-height: 32px;

  margin-bottom: 0;
}

.oil-product-hero__brand-name {
  color:
    var(--mm-title-color);

  font-size: 13px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: .045em;
  text-transform: uppercase;
}


/* title */

.oil-product-hero__title {
  margin: 0;

  color:
    var(--mm-title-color);

  font-family:
    var(--font-body);

  font-size: 24px;

  line-height: 1.2;

  font-weight: 650;

  letter-spacing: -0.02em;
}


/* ------------------------------------------------------------
   PRICE
   ------------------------------------------------------------ */

.oil-product-hero__price-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap:
    8px
    14px;

  margin-bottom: 0;
}

.oil-product-hero__price {
  color: var(--mm-text);

  font-size: 15px;

  line-height: 1.35;

  font-weight: 500;

  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.oil-product-hero__free-change {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  color:
    var(--mm-cta-primary);

  font-size: 13px;
  line-height: 1.2;

  font-weight: 750;
}

.oil-product-hero__free-change::before {
  content: "";

  width: 7px;
  height: 7px;

  flex:
    0 0 7px;

  border-radius: 50%;

  background:
    var(--mm-cta-primary);
}


/* ------------------------------------------------------------
   SHORT DESCRIPTION
   ------------------------------------------------------------ */

.oil-product-hero__description {
  margin-bottom: 22px;

  color:
    var(--mm-text-secondary);

  font-size: 13px;
  line-height: 1.65;
}

.oil-product-hero__description p {
  margin:
    0
    0
    10px;
}

.oil-product-hero__description p:last-child {
  margin-bottom: 0;
}

.oil-product-hero__description b,
.oil-product-hero__description strong {
  color:
    var(--mm-title-color);

  font-weight: 700;
}


/* ------------------------------------------------------------
   SAE / API / ACEA
   ------------------------------------------------------------ */

.oil-product-hero__facts {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  margin-bottom: 24px;
  gap: 10px;
}

.oil-product-hero__fact {
  min-width: 0;

  padding:
    16px
    16px;

  display: flex;
  align-items: center;

  gap: 12px;
  background: var(--mm-surface-soft);
  border-radius: var(--mm-radius-control);
  border: 1px solid var(--mm-border);
}


.oil-product-hero__facts-title {
  margin:
    0
    0
    10px;

  color:
    var(--mm-text);

  font-size: 12px;
  line-height: 1.25;

  font-weight: 700;

  letter-spacing: .045em;
  text-transform: uppercase;
}

.oil-product-hero__fact-icon {
  width: 44px;
  height: 44px;

  flex:
    0
    0
    44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;

  border-radius:
    var(--mm-radius-control);

  background: var(--mm-surface-dark);

  color: #fff;

  box-shadow: none;
}

.oil-product-hero__fact-icon svg {
  width: 22px;
  height: 22px;

  display: block;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oil-product-hero__fact-content {
  min-width: 0;
}


.oil-product-hero__fact-label {
  display: block;

  margin-bottom: 0;

  color: #fff;

  font-size: 11px;
  line-height: 1.2;

  font-weight: 700;

  letter-spacing: .06em;
  text-transform: uppercase;
}

.oil-product-hero__fact-value {
  display: block;

  color:
    var(--mm-title-color);

  font-size: 15px;
  line-height: 1.25;

  font-weight: 800;
}


/* ------------------------------------------------------------
   APPROVALS
   ------------------------------------------------------------ */

.oil-product-hero__approvals {
  margin-top: 20px;
  margin-bottom: 24px;
}

.oil-product-hero__approvals-title {
  margin-bottom: 10px;

  color:
    var(--mm-title-color);

  font-size: 12px;
  line-height: 1.25;

  font-weight: 800;

  letter-spacing: .045em;
  text-transform: uppercase;
}

.oil-product-hero__approval-list {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}

.oil-product-hero__approval {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;

  padding:
    7px
    11px;

  border:
    1px solid
    var(--mm-border);

  border-radius: 9px;

  color:
    var(--mm-title-color);

  font-size: 12px;
  line-height: 1;

  font-weight: 650;

  text-decoration: none;

  transition:
    border-color .16s ease,
    color .16s ease,
    background .16s ease;
}

.oil-product-hero__approval:hover {
  border-color:
    var(--mm-title-color);

  background:
    rgba(145,158,187,.08);
}


/* ------------------------------------------------------------
   ACTIONS
   ------------------------------------------------------------ */

.oil-product-hero__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 14px;

  margin-top: 18px;
}

.oil-product-hero__cta {
  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    12px
    18px;

  border-radius: 11px;

  background:
    var(--mm-cta-primary);

  color: #111;

  font-size: 13px;
  line-height: 1.2;

  font-weight: 750;

  text-align: center;
  text-decoration: none;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.oil-product-hero__cta--primary {
  border:
    1px solid
    var(--mm-cta-primary);

  background:
    var(--mm-cta-primary);

  color: #fff;
}

.oil-product-hero__cta--secondary {
  background:
    transparent;

  border:
    1px solid
    var(--mm-surface-dark);

  color:
    var(--mm-surface-dark);
}


.oil-product-hero__cta:hover {
  color: #fff;

  transform:
    translateY(-1px);
}

.oil-product-hero__cta--secondary:hover {
  color:
    var(--mm-surface-dark);
}


/* ============================================================
   KNOWLEDGE LAYER
   ============================================================ */

.oil-family-page__knowledge {
  margin-top: 34px;

  padding-top: 24px;

  border-top:
    1px solid
    rgba(145,158,187,.26);
}

.oil-family-page__knowledge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 16px;
}

.oil-family-page__knowledge-title {
  margin: 0;

  color:
    var(--mm-title-color);

  font-family:
    var(--font-body);

  font-size:
    var(--mm-section-title-size);

  line-height:
    var(--mm-section-title-line-height);

  font-weight:
    var(--mm-section-title-weight);

  letter-spacing:
    var(--mm-section-title-letter-spacing);
}


/* ============================================================
   BLOCK LAYOUT — 1..3 SECTIONS
   ============================================================ */

.oil-engineering-blocks {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px, 1fr)
    );

  gap: 12px;
}

.oil-engineering-block {
  min-width: 0;

  padding: 20px;

  border:
    1px solid
    rgba(145,158,187,.27);

  border-radius: 16px;

  background:
    var(--mm-popup-bg);
}

.oil-engineering-block__title {
  margin:
    0
    0
    14px;

  color:
    var(--mm-title-color);

  font-size: 17px;
  line-height: 1.25;

  font-weight: 800;
}

.oil-engineering-block__body {
  color:
    var(--mm-text-secondary);

  font-size: 14px;
  line-height: 1.6;
}


/* ============================================================
   HORIZONTAL ACCORDION — 4+ SECTIONS
   ============================================================ */

.oil-engineering-accordion {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--mm-border);

  border-radius: 18px;

  background:
    var(--mm-surface-soft);
}

.oil-engineering-accordion__tabs {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(120px, 1fr)
    );

  border-bottom:
    1px solid
    rgba(145,158,187,.28);
}

.oil-engineering-accordion__tab {
  appearance: none;

  min-width: 0;
  min-height: 74px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  gap: 5px;

  padding:
    12px
    14px;

  border: 0;
  border-right:
    1px solid
    rgba(145,158,187,.22);

  background:
    transparent;

  color:
    var(--mm-title-color);

  font-family:
    var(--font-body);

  text-align: left;

  cursor: pointer;
}

.oil-engineering-accordion__tab:last-child {
  border-right: 0;
}

.oil-engineering-accordion__tab--active {
  background:
    var(--mm-title-color);

  color: #fff;

  box-shadow:
    inset
    0
    -3px
    0
    var(--mm-cta-primary);
}

.oil-engineering-accordion__number {
  opacity: .56;

  font-size: 10px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: .08em;
}

.oil-engineering-accordion__label {
  font-size: 12px;
  line-height: 1.22;

  font-weight: 800;
}

.oil-engineering-accordion__panels {
  min-width: 0;
}

.oil-engineering-accordion__panel {
  padding:
    24px
    26px;
}

.oil-engineering-accordion__panel-title {
  margin:
    0
    0
    16px;

  color:
    var(--mm-title-color);

  font-size: 20px;
  line-height: 1.25;

  font-weight: 800;
}

.oil-engineering-accordion__panel-body {
  color:
    var(--mm-text-secondary);

  font-size: 13px;
  line-height: 1.65;
}

.oil-engineering-accordion__panel-body p:first-child {
  margin-top: 0;
}

.oil-engineering-accordion__panel-body p:last-child {
  margin-bottom: 0;
}

.oil-engineering-accordion__panel-body table {
  width: 100%;

  border-collapse: collapse;

  font-size: 13px;
}

.oil-engineering-accordion__panel-body th,
.oil-engineering-accordion__panel-body td {
  padding:
    9px
    10px;

  border-bottom:
    1px solid
    rgba(145,158,187,.24);

  text-align: left;
  vertical-align: top;
}

.oil-engineering-accordion__panel-body li {
  margin-bottom: 7px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 980px) {

  .oil-product-hero {
    grid-template-columns:
      minmax(270px, .8fr)
      minmax(0, 1.2fr);

    gap: 24px;
  }

  .oil-product-hero__visual {
    min-height: 420px;
  }

  .oil-product-hero__image {
    height: 390px;
  }

  .oil-product-hero__title {
    font-size:
      clamp(
        30px,
        4vw,
        42px
      );
  }

  .oil-product-hero__actions {
    grid-template-columns: 1fr;
  }

  .oil-product-hero__cta {
    width: 100%;
  }

  .oil-engineering-accordion__tabs {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );
  }
}


/* ============================================================
   MOBILE
   Horizontal accordion becomes vertical.
   ============================================================ */

@media (max-width: 620px) {

  .oil-family-page {
    margin-top: 12px;

    padding: 18px;

    border-radius: 24px;
  }

  .site-breadcrumbs {
    margin-bottom: 15px;

    gap: 10px;

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-inline:
      contain;

    font-size: 11px;

    white-space: nowrap;

    scrollbar-width: none;
  }

  .site-breadcrumbs::-webkit-scrollbar {
    display: none;
  }

  .site-breadcrumbs__separator {
    font-size: 20px;
  }

  .site-breadcrumbs__current {
    flex:
      0
      0
      auto;
  }

  .oil-product-hero {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .oil-product-hero__visual {
    min-height: 320px;

    padding: 14px;
  }

  .oil-product-hero__image {
    max-width: 320px;
    height: 300px;
  }

  .oil-product-hero__content {
    padding: 0;
  }

  .oil-product-hero__title-row {
    flex-direction: column;
    align-items: flex-start;

    gap: 10px;
  }

  .oil-product-hero__title {
    margin-bottom: 0;

    font-size: 20px;
    line-height: 1.2;
  }

  .oil-product-hero__price {
    font-size: 28px;
  }

  .oil-product-hero__facts {
    grid-template-columns: 1fr;
  }

  .oil-product-hero__fact {
    padding:
      12px
      9px;
  }

  .oil-product-hero__fact-value {
    font-size: 15px;
  }

  .oil-product-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .oil-product-hero__cta--secondary {
    order: 2;
  }

  .oil-family-page__knowledge {
    margin-top: 26px;

    padding-top: 20px;
  }


  /*
   * Accordion -> vertical layout
   */

  .oil-engineering-accordion {
    border: 0;

    background:
      transparent;
  }

  .oil-engineering-accordion__tabs {
    display: flex;

    flex-direction: column;

    gap: 6px;

    border: 0;
  }

  .oil-engineering-accordion__tab {
    min-height: 52px;

    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 10px;

    border:
      1px solid
      rgba(145,158,187,.30);

    border-radius: 11px;

    background:
      var(--mm-popup-bg);
  }

  .oil-engineering-accordion__tab--active {
    border-color:
      var(--mm-title-color);

    background:
      var(--mm-title-color);

    color: #fff;

    box-shadow:
      inset
      3px
      0
      0
      var(--mm-cta-primary);
  }

  .oil-engineering-accordion__panels {
    margin-top: 10px;
  }

  .oil-engineering-accordion__panel {
    padding:
      18px
      16px;

    border:
      1px solid
      rgba(145,158,187,.28);

    border-radius: 14px;

    background:
      var(--mm-popup-bg);
  }

  .oil-engineering-accordion__panel-title {
    font-size: 18px;
  }

  .oil-engineering-blocks {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   END OIL FAMILY — ENGINEERING PRODUCT CARD V1
   ============================================================ */


/* ============================================================

   OIL FAMILY — LOGO + PAGE GUTTER V1

   ============================================================ */

.oil-page {
  box-sizing: border-box;
  padding-inline: 24px;
}


/* Real oil brand logo */


.oil-product-hero__brand-logo {
  display: block;

  width: auto;
  height: 60px;

  max-width: 118px;

  object-fit: contain;
  object-position: left center;
}

.oil-product-hero__brand-name[hidden] {
  display: none;
}


@media (max-width: 620px) {

  .oil-page {
    padding-inline: 12px;
  }

  .oil-product-hero__brand-logo {
    height: 27px;
    max-width: 105px;
  }
}

/* ============================================================

   END OIL FAMILY — LOGO + PAGE GUTTER V1

   ============================================================ */


/* ============================================================
   OIL OEM BRANDS
   Verified manufacturer approvals
   ============================================================ */

.oil-oem-brands__rail {
  position: relative;
  min-width: 0;
}

.oil-oem-brands__rail::after {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  bottom: 4px;

  width: 180px;

  z-index: 5;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 18%,
      rgba(255,255,255,.32) 42%,
      rgba(255,255,255,.68) 72%,
      rgba(255,255,255,1) 100%
    );
}

.oil-oem-brands__grid {
  display: flex;
  gap: 10px;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  padding:
    2px
    2px
    4px;

  scrollbar-width: thin;
}

.oil-oem-brands__item {
  flex:
    0
    0
    auto;

  min-width: 104px;
  height: 58px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    0
    14px;

  border:
    1px solid var(--mm-border);

  border-radius:
    14px;

  background:
    var(--mm-surface);

  color:
    var(--text-main);

  text-decoration: none;
  cursor: pointer;
}

.oil-oem-brands__item:hover {
  border-color:
    var(--mm-border-strong);
}

.oil-oem-brands__logo {
  display: block;

  width: auto;
  max-width: 38px;
  height: 22px;

  object-fit: contain;
}

.oil-oem-brands__footer {
  margin-top: 4px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    5px
    9px;

  font-size: 13px;
  line-height: 1.4;
}

.oil-oem-brands__hint {
  color:
    var(--mm-text-disabled);
}

.oil-oem-brands__all {
  color:
    var(--mm-text);

  font-weight: 600;

  text-decoration: none;
}

.oil-oem-brands__all:hover {
  text-decoration: underline;
}

@media (max-width: 820px) {
  .oil-oem-brands__grid {
    scroll-snap-type:
      x
      proximity;
  }
}

@media (max-width: 620px) {
  .oil-oem-brands__grid {
    margin-right: -15px;

    padding-right: 15px;

    scroll-snap-type:
      x
      proximity;
  }

  .oil-oem-brands__rail::after {
    right: -15px;
    width: 195px;
  }

  .oil-oem-brands__item {
    min-width: 92px;
    height: 54px;

    scroll-snap-align:
      start;
  }

  .oil-oem-brands__logo {
    max-width: 46px;
    height: 24px;
  }
}

/* ============================================================
   END OIL OEM BRANDS
   ============================================================ */


/* ============================================================
   OIL CATALOG V2
   /masla/
   ============================================================ */

.oil-catalog {
  min-width: 0;
}


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.oil-catalog__header {
  width: 100%;

  margin-bottom: 28px;
}

.oil-catalog__title {
  margin:
    0
    0
    10px;

  color:
    var(--mm-title-color);

  font-family:
    var(--font-body);

  font-size: 32px;
  line-height: 1.15;

  font-weight: 700;

  letter-spacing: -0.025em;
}

.oil-catalog__description {
  width: 100%;
  max-width: none;

  margin: 0;

  color:
    var(--mm-text-secondary);

  font-size: 14px;
  line-height: 1.55;
}


/* ------------------------------------------------------------
   BODY
   1 / 4 layout
   ------------------------------------------------------------ */

.oil-catalog__body {
  min-width: 0;

  display: grid;

  grid-template-columns:
    minmax(190px, 1fr)
    minmax(0, 4fr);

  gap: 20px;

  align-items: start;
}


/* ------------------------------------------------------------
   FILTER RAIL
   ------------------------------------------------------------ */

.oil-catalog__filters {
  min-width: 0;

  padding: 18px;

  border:
    1px solid
    var(--mm-border);

  border-radius: 18px;

  background:
    var(--mm-surface-soft);
}

.oil-catalog__filters-title {
  color:
    var(--mm-title-color);

  font-size: 13px;
  line-height: 1.25;

  font-weight: 750;
}


/* ------------------------------------------------------------
   FILTER CONTROLS
   ------------------------------------------------------------ */

.oil-catalog__filter-form {
  margin-top: 16px;

  display: grid;

  gap: 14px;
}

.oil-catalog__filter-group {
  min-width: 0;

  display: grid;

  gap: 6px;
}

.oil-catalog__filter-label {
  color:
    var(--mm-text-secondary);

  font-size: 10px;
  line-height: 1.2;

  font-weight: 750;

  letter-spacing: .045em;
  text-transform: uppercase;
}

.oil-catalog__filter-select {
  width: 100%;
  min-width: 0;
  height: 40px;

  padding:
    0
    10px;

  border:
    1px solid
    var(--mm-border);

  border-radius: 10px;

  background:
    var(--mm-surface);

  color:
    var(--mm-text);

  font-family:
    inherit;

  font-size: 12px;
}

.oil-catalog__filter-reset {
  margin-top: 2px;

  color:
    var(--mm-text-secondary);

  font-size: 11px;
  line-height: 1.3;

  font-weight: 650;

  text-decoration: none;
}

.oil-catalog__filter-reset:hover {
  color:
    var(--mm-title-color);

  text-decoration:
    underline;
}


/* ------------------------------------------------------------
   RESULTS
   ------------------------------------------------------------ */

.oil-catalog__results {
  min-width: 0;
}

.oil-catalog__grid {
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;
}


.oil-catalog__empty {
  grid-column:
    1 / -1;

  min-height: 180px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  border:
    1px solid
    var(--mm-border);

  border-radius: 18px;

  background:
    var(--mm-surface-soft);

  color:
    var(--mm-text-secondary);

  font-size: 13px;

  text-align: center;
}


/* ============================================================
   OIL FAMILY CARD
   Visual language follows popular-vehicle-card,
   but remains an independent component.
   ============================================================ */

.oil-family-card {
  min-width: 0;

  display: grid;

  grid-template-columns:
    minmax(120px, .72fr)
    minmax(0, 1.6fr);

  grid-template-areas:
    "header header"
    "identity content";

  column-gap: 16px;
  row-gap: 12px;

  align-items: stretch;

  padding: 16px;

  border:
    1px solid
    var(--mm-border);

  border-radius: 18px;

  background:
    var(--mm-surface-soft);

  color:
    var(--text-main);
}


/* ------------------------------------------------------------
   CARD HEADER
   ------------------------------------------------------------ */

.oil-family-card__header {
  grid-area: header;

  min-width: 0;
}

.oil-family-card__title {
  min-width: 0;

  margin: 0;

  font-size: 18px;
  line-height: 1.15;

  font-weight: 750;
}

.oil-family-card__link {
  color:
    var(--text-main);

  text-decoration: none;
}

.oil-family-card__link:hover {
  color:
    var(--mm-title-color);
}


/* ------------------------------------------------------------
   PRODUCT VISUAL
   ------------------------------------------------------------ */

.oil-family-card__identity {
  grid-area: identity;

  min-width: 0;

  display: flex;
  flex-direction: column;
}

.oil-family-card__visual {
  width: 100%;
  height: 128px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding:
    10px
    12px;

  box-sizing:
    border-box;

  border-radius: 14px;

  background: #fff;

  text-decoration: none;
}

.oil-family-card__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* ------------------------------------------------------------
   CARD CONTENT
   ------------------------------------------------------------ */

.oil-family-card__content {
  grid-area: content;

  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  gap: 14px;
}

.oil-family-card__brand-logo {
  display: block;

  width: auto;
  height: 24px;

  max-width: 92px;

  margin-bottom: 8px;

  object-fit: contain;
  object-position: left center;
}


.oil-family-card__facts {
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  column-gap: 18px;
  row-gap: 0;

  align-items: start;
}

.oil-family-card__fact {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}

.oil-family-card__fact-label {
  color:
    var(--text-muted);

  font-size: 9px;
  line-height: 1.2;

  font-weight: 700;

  letter-spacing: .05em;
  text-transform: uppercase;
}

.oil-family-card__fact-value {
  min-width: 0;

  color:
    var(--text-main);

  font-size: 11px;
  line-height: 1.3;

  font-weight: 650;

  overflow-wrap: anywhere;
}

.oil-family-card__fact--primary
.oil-family-card__fact-value {
  font-size: 11px;

  font-weight: 750;
}


.oil-family-card__description {
  margin: 0;

  display: -webkit-box;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  color:
    var(--mm-text-secondary);

  font-size: 11px;
  line-height: 1.45;

  overflow-wrap: break-word;
}


.oil-family-card__price {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  grid-template-rows:
    auto
    auto;

  column-gap: 14px;
  row-gap: 3px;

  align-items: end;
}

.oil-family-card__price-label {
  grid-column: 1;
  grid-row: 1;
}

.oil-family-card__price-value {
  grid-column: 1;
  grid-row: 2;
}

.oil-family-card__price
> .oil-family-card__action {
  grid-column: 2;
  grid-row:
    1 / 3;

  align-self: end;
  justify-self: end;
}

.oil-family-card__price-label {
  color:
    var(--text-muted);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .05em;
  text-transform: uppercase;
}

.oil-family-card__price-value {
  color:
    var(--mm-title-color);

  font-size: 14px;
  line-height: 1.2;

  font-weight: 750;
}


.oil-family-card__oem {
  min-width: 0;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    6px
    10px;
}

.oil-family-card__oem-logos {
  display: flex;
  align-items: center;

  gap: 7px;
}

.oil-family-card__oem-logo {
  display: block;

  width: auto;
  height: 15px;

  max-width: 24px;

  object-fit: contain;
}

.oil-family-card__oem-count {
  color:
    var(--text-muted);

  font-size: 9px;
  line-height: 1.2;
}


.oil-family-card__action {
  align-self: flex-end;

  padding:
    10px
    12px;

  border-radius: 10px;

  background:
    var(--mm-surface-dark);

  color: #fff;

  font-size: 11px;
  line-height: 1;

  font-weight: 700;

  text-decoration: none;

  white-space: nowrap;
}

.oil-family-card__action:hover {
  color: #fff;

  transform:
    translateY(-1px);
}


/* ============================================================
   TABLET
   ============================================================ */

/* ------------------------------------------------------------
   PAGINATION
   ------------------------------------------------------------ */

.oil-catalog__pagination {
  width: 100%;

  margin-top: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;
}

.oil-catalog__pagination-item {
  min-width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    0
    10px;

  border:
    1px solid
    var(--mm-border);

  border-radius: 10px;

  background:
    transparent;

  color:
    var(--mm-text);

  font-size: 12px;
  line-height: 1;

  font-weight: 700;

  text-decoration: none;
}

.oil-catalog__pagination-item:hover {
  border-color:
    var(--mm-surface-dark);

  color:
    var(--mm-surface-dark);
}

.oil-catalog__pagination-item--active {
  border-color:
    var(--mm-surface-dark);

  background:
    var(--mm-surface-dark);

  color: #fff;
}

.oil-catalog__pagination-item--arrow {
  font-size: 22px;
  font-weight: 400;
}


@media (max-width: 980px) {

  .oil-catalog__body {
    grid-template-columns:
      minmax(170px, .8fr)
      minmax(0, 3.2fr);

    gap: 16px;
  }

  .oil-catalog__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .oil-catalog__header {
    margin-bottom: 20px;
  }

  .oil-catalog__title {
    font-size: 26px;
  }

  .oil-catalog__description {
    font-size: 13px;
  }

  .oil-catalog__body {
    display: block;
  }

  .oil-catalog__filters {
    margin-bottom: 16px;

    padding: 14px;
  }

  .oil-catalog__grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .oil-family-card {
    display: grid;

    grid-template-columns:
      112px
      minmax(0, 1fr);

    grid-template-areas:
      "header header"
      "identity content";

    column-gap: 14px;
    row-gap: 12px;

    padding: 14px;
  }

  .oil-family-card__title {
    font-size: 17px;
  }

  .oil-family-card__visual {
    height: 120px;

    padding:
      8px
      10px;
  }

  .oil-family-card__content {
    gap: 10px;
  }

  .oil-family-card__action {
    padding:
      9px
      11px;
  }
}


/* ------------------------------------------------------------
   SEO CONTENT
   ------------------------------------------------------------ */

.oil-catalog__seo {
  margin-top: 36px;

  padding-top: 28px;

  border-top:
    1px solid
    var(--mm-border);
}

.oil-catalog__seo-head {
  width: 100%;
  max-width: none;

  margin-bottom: 22px;
}

.oil-catalog__seo-kicker {
  display: block;

  margin-bottom: 8px;

  color:
    var(--mm-text-disabled);

  font-size: 10px;
  line-height: 1.2;

  font-weight: 750;

  letter-spacing: .06em;
  text-transform: uppercase;
}

.oil-catalog__seo-title {
  margin:
    0
    0
    10px;

  color:
    var(--mm-title-color);

  font-size: 24px;
  line-height: 1.2;

  font-weight: 700;

  letter-spacing: -.02em;
}

.oil-catalog__seo-lead {
  margin: 0;

  color:
    var(--mm-text-secondary);

  font-size: 14px;
  line-height: 1.6;
}

.oil-catalog__seo-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 16px;
}

.oil-catalog__seo-item {
  min-width: 0;

  padding: 18px;

  border:
    1px solid
    var(--mm-border);

  border-radius: 18px;

  background:
    var(--mm-surface-soft);
}

.oil-catalog__seo-item h3 {
  margin:
    0
    0
    10px;

  color:
    var(--mm-title-color);

  font-size: 14px;
  line-height: 1.3;

  font-weight: 750;
}

.oil-catalog__seo-item p {
  margin:
    0
    0
    10px;

  color:
    var(--mm-text-secondary);

  font-size: 12px;
  line-height: 1.6;
}

.oil-catalog__seo-item p:last-child {
  margin-bottom: 0;
}


@media (max-width: 980px) {

  .oil-catalog__seo-grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 620px) {

  .oil-catalog__seo {
    margin-top: 28px;

    padding-top: 22px;
  }

  .oil-catalog__seo-title {
    font-size: 20px;
  }

  .oil-catalog__seo-lead {
    font-size: 13px;
  }

  .oil-catalog__seo-grid {
    gap: 12px;
  }

  .oil-catalog__seo-item {
    padding: 16px;
  }
}


/* ============================================================
   END OIL CATALOG V2
   ============================================================ */



/* ============================================================
   FILTER CATALOG V1
   Oil / air / cabin filters
   ============================================================ */

.filter-page {
  width: 100%;
  max-width: 1440px;

  margin:
    0
    auto;

  padding:
    32px
    24px
    56px;

  box-sizing: border-box;

  color:
    var(--text-main);
}


/* ------------------------------------------------------------
   CATEGORY HEADER
   ------------------------------------------------------------ */

.filter-catalog__header {
  margin-bottom: 28px;
}

.filter-catalog__title {
  margin:
    0
    0
    10px;

  color:
    var(--mm-title-color);

  font-size: 34px;
  line-height: 1.08;

  font-weight: 750;

  letter-spacing: -.025em;
}

.filter-catalog__description {
  margin: 0;

  color:
    var(--mm-text-secondary);

  font-size: 14px;
  line-height: 1.55;
}


/* ------------------------------------------------------------
   PRODUCT GRID
   ------------------------------------------------------------ */

.filter-catalog__grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 16px;
}


/* ============================================================
   FILTER PRODUCT CARD
   ============================================================ */

.filter-product-card {
  min-width: 0;

  display: flex;
  flex-direction: column;

  padding: 14px;

  border:
    1px solid
    var(--mm-border);

  border-radius: 18px;

  background:
    var(--mm-surface-soft);

  color:
    var(--text-main);
}


/* ------------------------------------------------------------
   PRODUCT VISUAL
   ------------------------------------------------------------ */

.filter-product-card__visual {
  width: 100%;
  height: 128px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding:
    10px
    12px;

  box-sizing: border-box;

  border-radius: 14px;

  background: #fff;

  text-decoration: none;
}

.filter-product-card__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* ------------------------------------------------------------
   CARD CONTENT
   ------------------------------------------------------------ */

.filter-product-card__content {
  min-width: 0;

  flex: 1;

  display: flex;
  flex-direction: column;

  padding-top: 14px;
}

.filter-product-card__brand {
  margin-bottom: 5px;

  color:
    var(--mm-text-disabled);

  font-size: 10px;
  line-height: 1.2;

  font-weight: 750;

  letter-spacing: .06em;
  text-transform: uppercase;
}

.filter-product-card__title {
  min-width: 0;

  margin: 0;

  font-size: 16px;
  line-height: 1.25;

  font-weight: 750;
}

.filter-product-card__title a {
  color:
    var(--text-main);

  text-decoration: none;
}

.filter-product-card__title a:hover {
  color:
    var(--mm-title-color);
}


/* ------------------------------------------------------------
   PRICE / ACTION
   ------------------------------------------------------------ */

.filter-product-card__footer {
  margin-top: auto;
  padding-top: 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.filter-product-card__price {
  white-space: nowrap;

  color:
    var(--mm-title-color);

  font-size: 17px;
  line-height: 1.2;

  font-weight: 750;
}

.filter-product-card__action {
  align-self: flex-end;

  padding:
    10px
    12px;

  border-radius: 10px;

  background:
    var(--mm-surface-dark);

  color: #fff;

  font-size: 11px;
  line-height: 1;

  font-weight: 700;

  text-decoration: none;

  white-space: nowrap;
}

.filter-product-card__action:hover {
  color: #fff;

  transform:
    translateY(-1px);
}


/* ------------------------------------------------------------
   PAGINATION
   ------------------------------------------------------------ */

.filter-catalog__pagination {
  margin-top: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 7px;
}

.filter-catalog__pagination-item {
  min-width: 38px;
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    0
    9px;

  box-sizing: border-box;

  border:
    1px solid
    var(--mm-border);

  border-radius:
    var(--mm-radius-control);

  background:
    var(--mm-surface-soft);

  color:
    var(--text-main);

  font-size: 12px;

  font-weight: 700;

  text-decoration: none;
}

.filter-catalog__pagination-item:hover {
  color:
    var(--mm-title-color);

  border-color:
    var(--mm-title-color);
}

.filter-catalog__pagination-item--active {
  background:
    var(--mm-title-color);

  border-color:
    var(--mm-title-color);

  color: #fff;
}

.filter-catalog__pagination-item--arrow {
  font-size: 20px;
}

.filter-catalog__pagination-gap {
  min-width: 24px;

  text-align: center;

  color:
    var(--mm-text-disabled);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1050px) {

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

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

  .filter-page {
    padding:
      22px
      14px
      40px;
  }

  .filter-catalog__header {
    margin-bottom: 20px;
  }

  .filter-catalog__title {
    font-size: 27px;
  }

  .filter-catalog__description {
    font-size: 13px;
  }

  .filter-catalog__grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .filter-product-card {
    display: grid;

    grid-template-columns:
      118px
      minmax(0, 1fr);

    gap: 14px;

    padding: 12px;
  }

  .filter-product-card__visual {
    height: 118px;

    padding: 9px;
  }

  .filter-product-card__content {
    padding-top: 2px;
  }

  .filter-product-card__title {
    font-size: 15px;
  }

  .filter-product-card__footer {
    padding-top: 12px;

    align-items: flex-end;
  }

  .filter-product-card__price {
    font-size: 15px;
  }

  .filter-product-card__action {
    min-height: 34px;

    padding:
      7px
      9px;

    font-size: 11px;
  }

  .filter-catalog__pagination {
    margin-top: 24px;
  }

}


/* ============================================================
   FILTER PRODUCT HERO
   Compact product-page counterpart of oil-product-hero.
   ============================================================ */

/* ------------------------------------------------------------
   HERO GRID
   ------------------------------------------------------------ */

.filter-product-hero {
  display: grid;

  grid-template-columns:
    minmax(300px, .76fr)
    minmax(0, 1.24fr);

  align-items: stretch;

  gap: 42px;

  min-width: 0;
}


/* ------------------------------------------------------------
   VISUAL
   ------------------------------------------------------------ */

.filter-product-hero__visual {
  min-width: 0;
  min-height: 480px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    28px
    24px;

  overflow: hidden;

  border-radius: 24px;

  background:
    var(--mm-popup-bg);
}


.filter-product-hero__image {
  display: block;

  width: 100%;
  max-width: 430px;
  height: 430px;

  object-fit: contain;
  object-position: center;

  margin: auto;
}


/* ------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------ */

.filter-product-hero__content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-self: center;

  padding:
    18px
    8px
    18px
    0;
}


.filter-product-hero__brand {
  margin-bottom: 8px;

  color:
    var(--mm-text-disabled);

  font-size: 11px;
  line-height: 1.2;

  font-weight: 750;

  letter-spacing: .06em;
  text-transform: uppercase;
}


.filter-product-hero__title {
  margin:
    0
    0
    10px;

  color:
    var(--mm-title-color);

  font-size: 34px;
  line-height: 1.08;

  font-weight: 750;

  letter-spacing: -.025em;
}


.filter-product-hero__category {
  margin-bottom: 12px;

  color:
    var(--mm-text-secondary);

  font-size: 12px;
  line-height: 1.35;

  font-weight: 500;
}


/* ------------------------------------------------------------
   PRICE
   ------------------------------------------------------------ */

.filter-product-hero__price-block {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-top: 8px;
  margin-bottom: 20px;
}


.filter-product-hero__price-icon {
  width: 32px;
  height: 32px;

  flex:
    0
    0
    32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background:
    var(--mm-control-surface-strong);

  color:
    var(--mm-text);
}


.filter-product-hero__price-icon svg {
  width: 16px;
  height: 16px;

  display: block;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.filter-product-hero__price-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.filter-product-hero__price-label {
  color:
    var(--mm-text-disabled);

  font-size: 11px;
  line-height: 1.2;

  font-weight: 600;

  letter-spacing: .04em;
  text-transform: uppercase;
}


.filter-product-hero__price {
  color:
    var(--mm-title-color);

  font-size: 28px;
  line-height: 1.1;

  font-weight: 750;

  letter-spacing: -.02em;
}


/* ------------------------------------------------------------
   DESCRIPTION
   ------------------------------------------------------------ */

.filter-product-hero__description {
  max-width: 620px;

  margin:
    0
    0
    24px;

  color:
    var(--mm-text-secondary);

  font-size: 14px;
  line-height: 1.55;
}


/* ------------------------------------------------------------
   ACTION
   ------------------------------------------------------------ */

.filter-product-hero__actions {
  display: flex;
  align-items: center;

  gap: 10px;
}


.filter-product-hero__action {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    12px
    16px;

  border-radius: 10px;

  background:
    var(--mm-surface-dark);

  color: #fff;

  font-size: 12px;
  line-height: 1;

  font-weight: 700;

  text-decoration: none;

  white-space: nowrap;
}


.filter-product-hero__action:hover {
  color: #fff;

  transform:
    translateY(-1px);
}


.filter-product-hero__action--secondary {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    12px
    16px;

  border:
    1px solid
    var(--mm-surface-dark);

  border-radius: 10px;

  background: transparent;

  color:
    var(--mm-surface-dark);

  font-size: 12px;
  line-height: 1;

  font-weight: 700;

  text-decoration: none;

  white-space: nowrap;
}


.filter-product-hero__action--secondary:hover {
  background: transparent;

  color:
    var(--mm-surface-dark);

  transform:
    translateY(-1px);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

  .filter-product-hero {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 20px;
  }


  .filter-product-hero__visual {
    min-height: 300px;

    padding:
      20px;
  }


  .filter-product-hero__image {
    max-width: 280px;
    height: 280px;
  }


  .filter-product-hero__content {
    padding: 0;
  }


  .filter-product-hero__title {
    font-size: 27px;
  }


  .filter-product-hero__category {
    margin-bottom: 18px;
  }


  .filter-product-hero__description {
    font-size: 13px;
  }


  .filter-product-hero__actions {
    align-items: stretch;
  }


  .filter-product-hero__action,
  .filter-product-hero__action--secondary {
    width: 100%;
  }

}


/* ============================================================
   SITE NAV V1
   Global desktop navigation + fullscreen mobile menu
   ============================================================ */

.site-nav {
  position: relative;
  z-index: 900;

  width: 100%;

  border-bottom:
    1px solid
    var(--mm-border);

  background:
    rgba(255, 255, 255, .88);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


.site-nav__inner {
  width: 100%;
  max-width: 1440px;

  min-height: 66px;

  margin:
    0
    auto;

  padding:
    0
    24px;

  box-sizing:
    border-box;

  display: flex;
  align-items: center;

  gap: 30px;
}


/* ------------------------------------------------------------
   BRAND
   ------------------------------------------------------------ */

.site-nav__brand {
  flex:
    0
    0
    auto;

  display: inline-flex;
  align-items: center;

  gap: 10px;

  color:
    var(--mm-title-color);

  text-decoration: none;
}


.site-nav__brand-mark {
  width: 32px;
  height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background:
    var(--mm-surface-dark);

  color: #fff;

  font-size: 10px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: .04em;
}


.site-nav__brand-name {
  font-size: 14px;
  line-height: 1;

  font-weight: 750;

  white-space: nowrap;
}


/* ------------------------------------------------------------
   DESKTOP LINKS
   ------------------------------------------------------------ */

.site-nav__desktop {
  min-width: 0;

  margin-left: auto;

  display: flex;
  align-items: center;

  gap: 4px;
}


.site-nav__link {
  position: relative;

  display: inline-flex;
  align-items: center;

  min-height: 38px;

  padding:
    0
    12px;

  border-radius: 10px;

  color:
    var(--mm-text-secondary);

  font-size: 12px;
  line-height: 1;

  font-weight: 650;

  text-decoration: none;

  white-space: nowrap;
}


.site-nav__link:hover {
  color:
    var(--mm-title-color);
}


.site-nav__link--active {
  background:
    var(--mm-surface-soft);

  color:
    var(--mm-title-color);
}


/* ------------------------------------------------------------
   MOBILE BUTTON
   ------------------------------------------------------------ */

.site-nav__menu-button {
  display: none;

  width: 42px;
  height: 42px;

  margin-left: auto;

  padding: 0;

  border:
    1px solid
    var(--mm-border);

  border-radius: 12px;

  background:
    transparent;

  color:
    var(--mm-surface-dark);

  cursor: pointer;
}


.site-nav__menu-button span {
  display: block;

  width: 17px;
  height: 1px;

  margin:
    5px
    auto;

  background:
    currentColor;
}


/* ============================================================
   FULLSCREEN OVERLAY
   ============================================================ */

.site-nav__overlay {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: flex;
  flex-direction: column;

  padding:
    22px
    20px
    24px;

  box-sizing:
    border-box;

  background:
    #fff;

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(-8px);

  pointer-events: none;

  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}


.site-nav__overlay--open {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0);

  pointer-events: auto;
}


.site-nav__overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


.site-nav__overlay-brand {
  color:
    var(--mm-title-color);

  font-size: 14px;

  font-weight: 750;

  text-decoration: none;
}


.site-nav__close {
  position: relative;

  width: 44px;
  height: 44px;

  flex:
    0
    0
    44px;

  padding: 0;

  border:
    1px solid
    var(--mm-border);

  border-radius: 12px;

  background:
    transparent;

  color:
    var(--mm-surface-dark);

  cursor: pointer;
}


.site-nav__close span {
  position: absolute;

  left: 12px;
  top: 21px;

  width: 18px;
  height: 1px;

  background:
    currentColor;
}


.site-nav__close span:first-child {
  transform:
    rotate(45deg);
}


.site-nav__close span:last-child {
  transform:
    rotate(-45deg);
}


/* ------------------------------------------------------------
   FULLSCREEN LINKS
   ------------------------------------------------------------ */

.site-nav__mobile {
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    30px
    0;
}


.site-nav__mobile-link {
  min-width: 0;

  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    30px;

  align-items: center;

  gap: 10px;

  padding:
    17px
    0;

  border-bottom:
    1px solid
    var(--mm-border);

  color:
    var(--mm-text-secondary);

  text-decoration: none;
}


.site-nav__mobile-index {
  align-self: start;

  padding-top: 5px;

  color:
    var(--mm-text-disabled);

  font-size: 9px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: .08em;
}


.site-nav__mobile-label {
  min-width: 0;

  font-size:
    clamp(
      25px,
      8vw,
      40px
    );

  line-height: 1.05;

  font-weight: 700;

  letter-spacing:
    -.035em;
}


.site-nav__mobile-arrow {
  justify-self: end;

  font-size: 24px;
  line-height: 1;

  font-weight: 300;
}


.site-nav__mobile-link--active {
  color:
    var(--mm-title-color);
}


.site-nav__mobile-link--active
.site-nav__mobile-index {
  color:
    var(--mm-title-color);
}


.site-nav__overlay-footer {
  color:
    var(--mm-text-disabled);

  font-size: 10px;
  line-height: 1.2;

  font-weight: 650;

  letter-spacing: .06em;

  text-transform: uppercase;
}


/* ------------------------------------------------------------
   PAGE LOCK
   ------------------------------------------------------------ */

html.site-nav-lock,
body.site-nav-lock {
  overflow: hidden;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

  .site-nav__inner {
    min-height: 60px;

    padding:
      0
      14px;
  }


  .site-nav__desktop {
    display: none;
  }


  .site-nav__menu-button {
    display: block;
  }


  .site-nav__brand-name {
    font-size: 13px;
  }

}


/* ============================================================
   DESKTOP — overlay never participates
   ============================================================ */

@media (min-width: 761px) {

  .site-nav__overlay {
    display: none;
  }

}


/* ============================================================
   SITE FOOTER V1
   Global footer component
   ============================================================ */

.site-footer {
  width: 100%;

  margin-top: 56px;

  background:
    var(--mm-surface-dark);

  color:
    var(--mm-text-muted);
}


.site-footer__inner {
  width: 100%;
  max-width:
    var(--mm-container);

  margin:
    0
    auto;

  padding:
    46px
    24px
    24px;

  box-sizing:
    border-box;

  display: grid;

  grid-template-columns:
    minmax(240px, .85fr)
    minmax(0, 1.15fr);

  grid-template-areas:
    "brand nav"
    "bottom bottom";

  column-gap: 72px;
  row-gap: 40px;
}


/* ------------------------------------------------------------
   BRAND
   ------------------------------------------------------------ */

.site-footer__brand {
  grid-area: brand;

  min-width: 0;
}


.site-footer__logo {
  display: inline-flex;

  margin-bottom: 12px;

  color:
    var(--mm-select-hover-color);

  font-size: 20px;
  line-height: 1;

  font-weight: 750;

  letter-spacing:
    -.02em;

  text-decoration: none;
}


.site-footer__description {
  max-width: 360px;

  margin: 0;

  color:
    var(--mm-text-muted);

  font-size: 12px;
  line-height: 1.55;
}


/* ------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------ */

.site-footer__nav {
  grid-area: nav;

  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  column-gap: 32px;
  row-gap: 4px;

  align-self: start;
}


.site-footer__nav a {
  min-width: 0;

  display: flex;
  align-items: center;

  min-height: 38px;

  padding:
    0
    10px;

  border-radius:
    var(--mm-radius-control);

  color:
    var(--mm-text-muted);

  font-size: 12px;
  line-height: 1.2;

  font-weight: 600;

  text-decoration: none;

  transition:
    color .16s ease,
    background-color .16s ease;
}


.site-footer__nav a:hover {
  background:
    var(--mm-black-hover);

  color:
    var(--mm-select-hover-color);
}


/* ------------------------------------------------------------
   BOTTOM
   ------------------------------------------------------------ */

.site-footer__bottom {
  grid-area: bottom;

  min-width: 0;

  padding-top: 20px;

  border-top:
    1px solid
    var(--mm-black-hover);

  display: flex;
  align-items: center;

  color:
    var(--mm-text-muted);

  font-size: 10px;
  line-height: 1.3;

  font-weight: 600;

  letter-spacing: .04em;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

  .site-footer {
    margin-top: 40px;
  }


  .site-footer__inner {
    padding:
      32px
      14px
      max(
        22px,
        env(safe-area-inset-bottom)
      );

    grid-template-columns:
      minmax(0, 1fr);

    grid-template-areas:
      "brand"
      "nav"
      "bottom";

    row-gap: 28px;
  }


  .site-footer__logo {
    font-size: 18px;
  }


  .site-footer__description {
    max-width: 300px;

    font-size: 11px;
  }


  .site-footer__nav {
    grid-template-columns:
      minmax(0, 1fr);

    row-gap: 0;
  }


  .site-footer__nav a {
    min-height: 44px;

    padding:
      0;

    border-bottom:
      1px solid
      var(--mm-black-hover);

    border-radius: 0;

    font-size: 13px;
  }


  .site-footer__nav a:hover {
    background:
      transparent;
  }


  .site-footer__bottom {
    padding-top: 18px;
  }

}


/* ============================================================
   FAQ ACCORDION V1
   Canonical owner: styles-v2.css
   Reusable FAQ entity
   ============================================================ */

.faq-accordion {
  width: 100%;

  margin-top: 28px;

  padding:
    30px
    32px
    32px;

  box-sizing: border-box;

  border:
    var(--mm-section-border);

  border-radius:
    var(--mm-radius-large);

  background:
    var(--mm-surface);

  box-shadow:
    var(--mm-shadow);
}


/* ------------------------------------------------------------
   HEAD
   ------------------------------------------------------------ */

.faq-accordion__head {
  max-width: 760px;

  margin-bottom: 26px;
}


.faq-accordion__kicker {
  margin-bottom: 6px;

  color:
    var(--accent);

  font-size: 12px;
  line-height: 1.2;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.faq-accordion__title {
  margin: 0;

  color:
    var(--mm-title-color);

  font-family:
    var(--font-body);

  font-size:
    var(--mm-section-title-size);

  line-height:
    var(--mm-section-title-line-height);

  font-weight:
    var(--mm-section-title-weight);

  letter-spacing:
    var(--mm-section-title-letter-spacing);
}


.faq-accordion__lead {
  max-width: 680px;

  margin:
    10px
    0
    0;

  color:
    var(--mm-text);

  font-size: 14px;
  line-height: 1.55;
}


/* ------------------------------------------------------------
   LIST
   ------------------------------------------------------------ */

.faq-accordion__list {
  border-top:
    1px solid
    var(--mm-border);
}


/* ------------------------------------------------------------
   ITEM
   ------------------------------------------------------------ */

.faq-accordion__item {
  margin: 0;

  border-bottom:
    1px solid
    var(--mm-border);

  background:
    transparent;

  transition:
    background-color .22s ease;
}


/* Remove native disclosure marker */

.faq-accordion__question {
  list-style: none;
}


.faq-accordion__question::-webkit-details-marker {
  display: none;
}


.faq-accordion__question::marker {
  display: none;
  content: "";
}


/* ------------------------------------------------------------
   QUESTION
   ------------------------------------------------------------ */

.faq-accordion__question {
  min-height: 72px;

  padding:
    0
    4px;

  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    38px;

  align-items: center;

  gap: 16px;

  box-sizing: border-box;

  color:
    var(--mm-title-color);

  cursor: pointer;

  user-select: none;

  transition:
    color .16s ease;
}


.faq-accordion__question:hover {
  color:
    var(--mm-info-color);
}


.faq-accordion__question:focus-visible {
  outline:
    2px solid
    var(--mm-info-border);

  outline-offset: 3px;

  border-radius:
    var(--mm-radius-control);
}


/* ------------------------------------------------------------
   NUMBER
   ------------------------------------------------------------ */

.faq-accordion__number {
  color:
    var(--mm-text-disabled);

  font-size: 11px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: .06em;
}


/* ------------------------------------------------------------
   QUESTION TEXT
   ------------------------------------------------------------ */

.faq-accordion__question-text {
  min-width: 0;

  font-size: 15px;
  line-height: 1.35;

  font-weight: 650;

  letter-spacing: -.01em;
}


/* ------------------------------------------------------------
   PLUS / MINUS
   ------------------------------------------------------------ */

.faq-accordion__icon {
  position: relative;

  width: 38px;
  height: 38px;

  display: block;

  border:
    1px solid
    var(--mm-border-strong);

  border-radius:
    var(--mm-radius-control);

  background:
    var(--mm-surface-soft);

  color:
    var(--mm-title-color);

  transition:
    background-color .16s ease,
    border-color .16s ease,
    transform .18s ease;
}


.faq-accordion__icon span {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 14px;
  height: 1px;

  background:
    currentColor;

  transform:
    translate(-50%, -50%);

  transition:
    transform .18s ease,
    opacity .18s ease;
}


.faq-accordion__icon span:last-child {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}


.faq-accordion__item[open]
.faq-accordion__icon {
  border-color:
    var(--mm-info-border);

  background:
    var(--mm-info-surface);
}


.faq-accordion__item[open]
.faq-accordion__icon span:last-child {
  opacity: 0;

  transform:
    translate(-50%, -50%)
    rotate(0deg);
}


/* ------------------------------------------------------------
   OPEN STATE
   ------------------------------------------------------------ */

.faq-accordion__item[open]
.faq-accordion__question {
  color:
    var(--mm-info-color);
}


/* ------------------------------------------------------------
   ANSWER
   ------------------------------------------------------------ */

.faq-accordion__answer {
  padding:
    0
    58px
    22px
    54px;
}


.faq-accordion__answer-inner {
  max-width: 820px;

  padding:
    16px
    18px;

  box-sizing: border-box;

  border:
    1px solid
    var(--mm-info-border);

  border-radius:
    var(--mm-radius-medium);

  background:
    var(--mm-info-surface-strong);
}


.faq-accordion__answer p {
  margin: 0;

  color:
    var(--mm-text);

  font-size: 13px;
  line-height: 1.6;
}


.faq-accordion__answer p + p {
  margin-top: 10px;
}


/* ============================================================
   FAQ ACCORDION — MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .faq-accordion {
    margin-top: 20px;

    padding:
      22px
      16px
      18px;
  }


  .faq-accordion__head {
    margin-bottom: 18px;
  }


  .faq-accordion__title {
    font-size:
      var(--mm-section-title-size-mobile);
  }


  .faq-accordion__lead {
    margin-top: 8px;

    font-size: 13px;
    line-height: 1.5;
  }


  .faq-accordion__question {
    min-height: 66px;

    padding: 0;

    grid-template-columns:
      24px
      minmax(0, 1fr)
      34px;

    gap: 10px;
  }


  .faq-accordion__number {
    font-size: 10px;
  }


  .faq-accordion__question-text {
    font-size: 14px;
    line-height: 1.35;
  }


  .faq-accordion__icon {
    width: 34px;
    height: 34px;
  }


  .faq-accordion__answer {
    padding:
      0
      0
      16px
      34px;
  }


  .faq-accordion__answer-inner {
    padding:
      14px
      15px;

    border-radius:
      var(--mm-radius-control);
  }


  .faq-accordion__answer p {
    font-size: 12px;
    line-height: 1.6;
  }

}