/* ---------------------------------------------------------------------------
   Mobile vehicle list, on suzuki.com.au's own mobile sub-menu values:
   nameplate left, side-profile render pinned right in their 124.35x53 box,
   rows separated by a hairline on white.
   --------------------------------------------------------------------------- */
.mob-models {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
}
.mob-models > li {
  margin: 0;
}

/*
  The row hugs its content. It previously carried a 78px min-height ON TOP of
  50px of vertical padding, so every row stood ~100px tall and eight models
  filled more than a phone screen. Height now comes from the copy, with the
  render (47px) setting the floor.
*/
.mob-model {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #cbcbcb;
  background: #fff;
}
.mob-model__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mob-model__link {
  flex: 0 0 auto;
  line-height: 0;
}

/* Small, quiet, and secondary to the nameplate — it is a shortcut, not the
   row's main action. */
.mob-model__build {
  font-family: "TT Commons Pro Regular", "TTCommons_Regular", Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: #00368f;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mob-model__name {
  font-family: "TT Commons Pro DemiBold", "TTCommons_DemiBold", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: #121212;
}

/* Suzuki leaves "e VITARA" cased as written. */
.mob-model__name.no-caps {
  text-transform: none;
}

/*
  Pinned right and vertically centred, exactly as the OEM positions
  `.suzuki-main-nav__toggle-nav__sub-menu__item--image`. `contain` keeps the
  side profile from being cropped to fill the box, and the right padding on the
  row above reserves the space so a long nameplate cannot run under it.
*/
/* In flow rather than absolutely positioned: the drawer is only ~300px wide,
   so an absolute 124px render sat on top of the nameplate instead of beside
   it. Laid out as a flex sibling it takes its own column and the text gets
   what is left. */
.mob-model__img {
  display: block;
  width: 140px;
  height: 60px;
  -o-object-fit: contain;
     object-fit: contain;
}
.mob-model__name {
  text-decoration: none;
}
.mob-model__name:hover,
.mob-model__name:focus {
  color: #00368f;
  text-decoration: none;
}