/* Shared page edges. Category's wide-screen inset is the storefront reference.
 * Home campaigns and the checkout retain their dedicated composition.
 * Only layout containers are reset; forms and editorial reading widths stay local.
 */
body {
  --ma-page-gutter: 16px;
}

@media (min-width: 768px) {
  body { --ma-page-gutter: 24px; }
}

/* Reach the wide category inset gradually, without losing 222px at one breakpoint. */
@media (min-width: 1440px) {
  body { --ma-page-gutter: clamp(24px, calc(23.125vw - 309px), 135px); }
}

body:not(#index):not(#checkout) #wrapper > .tvcmscontainer-layout {
  padding-inline: var(--ma-page-gutter) !important;
}

body:not(#index):not(#checkout) #wrapper > .tvcmscontainer-layout > .container,
body:not(#index):not(#checkout) #wrapper > .tvcmscontainer-layout > .container > .container {
  width: 100%;
  max-width: none;
  padding-inline: 0 !important;
}

/* Full-width pages have no adjacent Bootstrap columns to balance a negative row. */
body:not(#index):not(#checkout) #wrapper > .tvcmscontainer-layout > .container > .container:has(> .row > #content-wrapper:only-child) > .row,
body.ma-customer-workspace-page .ma-customer-workspace-layout > .row {
  margin-inline: 0;
}

body:not(#index):not(#checkout) #wrapper > .tvcmscontainer-layout > .container > .container > .row > #content-wrapper:only-child {
  padding-inline: 0;
}

/* The vehicle directory is a page of components, not a card wrapping more cards. */
body#module-psvehiclecompat-vehicles #content.page-content,
body#module-psvehiclecompat-checker #content.page-content {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* The wrapper already owns the gutter, including the full-width blue finder. */
body:not(#index):not(#checkout) #wrappertop > #psvc-selector,
body#module-psvehiclecompat-vehicles .psvc-finder__selector #psvc-selector,
body#module-psvehiclecompat-checker .psvc-checker-selector #psvc-selector {
  padding-inline: 0 !important;
}

body#module-psvehiclecompat-checker .psvc-checker-hero,
body#module-psvehiclecompat-checker .psvc-checker {
  width: 100%;
}

body#module-psvehiclecompat-vehicles .psvc-finder__steps {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

body#module-psvehiclecompat-vehicles .psvc-vehicles-az__item {
  min-width: 44px;
  min-height: 44px;
}

body#manufacturer .ma-brands-az__item {
  flex: 0 0 auto;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 10px;
}

/* Inline labels cannot ellipsize and used to paint over the toggle chevron. */
#wrapper #psvc-selector .psvc-bar__mobile-toggle-text {
  display: flex;
  flex: 1 1 0%;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

#wrapper #psvc-selector .psvc-bar__mobile-toggle-title,
#wrapper #psvc-selector .psvc-bar__mobile-toggle-sub {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

#wrapper #psvc-selector .psvc-bar__mobile-toggle > .psvc-garage-icon,
#wrapper #psvc-selector .psvc-bar__mobile-chevron {
  flex-shrink: 0;
}

body.ma-customer-workspace-page :is(.mtg-btn-primary, .mtg-btn-secondary, .mtg-btn-link) {
  min-height: 44px;
  line-height: 1.4;
}

body#index .mtap-home-button {
  height: auto;
  min-height: 44px;
  line-height: 1.4;
  white-space: normal;
}

@media (max-width: 991.98px) {
  #wrapper #psvc-selector .psvc-bar__inner {
    padding: 0 !important;
  }

  #wrapper #psvc-selector .psvc-bar__apply {
    height: auto;
    min-height: 44px;
    padding: 8px 12px;
    white-space: normal;
    line-height: 1.4;
  }
}

/* At mobile widths the theme removes column padding: remove its balancing row too. */
@media (max-width: 767.98px) {
  body:not(#index):not(#checkout) #wrapper > .tvcmscontainer-layout > .container > .container > .row {
    margin-inline: 0;
  }
}