:root {
  --mm-container: 1240px;

  --mm-page-gutter:
    clamp(
      12px,
      3vw,
      28px
    );

  --mm-section-gap:
    clamp(
      14px,
      2vw,
      24px
    );

  --mm-block-gap:
    clamp(
      10px,
      1.5vw,
      16px
    );

  --mm-panel-padding:
    clamp(
      16px,
      2.2vw,
      28px
    );

  --mm-card-padding:
    clamp(
      12px,
      1.5vw,
      18px
    );

  --mm-grid-gap:
    clamp(
      10px,
      1.5vw,
      16px
    );

  --mm-radius-panel:
    28px 15px 30px 13px;

  --mm-radius-card:
    20px 11px 22px 9px;

  --mm-radius-control:
    12px 7px 13px 6px;
}


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

.topbar,
.stage,
.result,
.catalog-result {
  width:
    min(
      100%,
      var(--mm-container)
    );

  margin-inline:
    auto;
}


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

.topbar {
  padding-inline:
    var(--mm-page-gutter);
}

.stage {
  padding-inline:
    var(--mm-page-gutter);
}

.result {
  padding-inline:
    var(--mm-page-gutter);
}


/* ============================================================
   VERTICAL RHYTHM
   ============================================================ */

.stage {
  padding-bottom:
    clamp(
      72px,
      9vw,
      120px
    );
}

.vehicle-hero,
.vehicle-picker,
.service-dashboard,
.catalog-section,
.recommended-oils,
.oil-choice,
.filter-choice,
.catalog-calculator {
  margin-top:
    var(--mm-section-gap);
}

.vehicle-hero:first-child,
.vehicle-picker:first-child,
.service-dashboard:first-child,
.catalog-section:first-child {
  margin-top:
    0;
}


/* ============================================================
   PANEL SYSTEM
   ============================================================ */

.vehicle-hero,
.vehicle-picker,
.service-dashboard,
.catalog-section,
.recommended-oils,
.oil-choice,
.filter-choice,
.catalog-calculator,
.booking-dialog__panel {
  border-radius:
    var(--mm-radius-panel);
}

.vehicle-picker,
.service-dashboard,
.catalog-section,
.recommended-oils,
.oil-choice,
.filter-choice,
.catalog-calculator {
  padding:
    var(--mm-panel-padding);
}


/* ============================================================
   INNER GRID SYSTEM
   ============================================================ */

.stepper,
.service-dashboard__body,
.catalog-section__body,
.recommended-oils__list,
.oil-choice__list,
.filter-choice__list,
.catalog-calculator__content {
  gap:
    var(--mm-grid-gap);
}


/* ============================================================
   TWO-COLUMN LAYOUT
   ============================================================ */

.service-dashboard__body {
  display:
    grid;

  grid-template-columns:
    minmax(0, .95fr)
    minmax(340px, 1.05fr);

  align-items:
    stretch;

  gap:
    clamp(
      16px,
      2.4vw,
      30px
    );
}


/* ============================================================
   CARD SYSTEM
   ============================================================ */

.catalog-product,
.catalog-product--commercial,
.recommended-oil-row,
.oil-choice-row--catalog,
.filter-choice-row,
.service-dashboard__vehicle-fact,
.service-dashboard__volume-card,
.service-dashboard__oil,
.catalog-calculator__group,
.catalog-calculator__summary {
  border-radius:
    var(--mm-radius-card);
}


/* ============================================================
   CONTROL SYSTEM
   ============================================================ */

.dropdown,
.booking-dialog__field input,
.catalog-product__select,
.recommended-oil-row__select,
.service-dashboard__action,
.catalog-calculator__booking,
.booking-dialog__submit {
  border-radius:
    var(--mm-radius-control);
}


/* ============================================================
   CONTENT WIDTH
   ============================================================ */

.stage__subtitle,
.vehicle-picker__hint,
.service-dashboard__subtitle,
.catalog-section__subtitle,
.booking-dialog__notice {
  max-width:
    720px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {
  :root {
    --mm-container:
      100%;

    --mm-section-gap:
      14px;

    --mm-panel-padding:
      18px;

    --mm-grid-gap:
      12px;
  }

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


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {
  :root {
    --mm-page-gutter:
      12px;

    --mm-section-gap:
      12px;

    --mm-block-gap:
      10px;

    --mm-panel-padding:
      14px;

    --mm-card-padding:
      11px;

    --mm-grid-gap:
      10px;

    --mm-radius-panel:
      22px 12px 24px 10px;

    --mm-radius-card:
      16px 9px 18px 8px;

    --mm-radius-control:
      11px 7px 12px 6px;
  }

  .topbar {
    padding-inline:
      15px;
  }

  .stage,
  .result {
    padding-inline:
      var(--mm-page-gutter);
  }

  .vehicle-picker,
  .service-dashboard,
  .catalog-section,
  .recommended-oils,
  .oil-choice,
  .filter-choice,
  .catalog-calculator {
    padding:
      var(--mm-panel-padding);
  }
}