/* Car model pages: the tyre sizes fitted to the model, by wheel size (tyrepage.aspx.cs, SizesBlock),
   after the popular tyres, under one of six headings that take turns from model to model. Linked only
   on model pages with sizes. The heading is the site's own (pre-header, header2 - the popular tyres'
   size); each size is a pill like the "All Ford Models" links, with their red arrow, on a white card.
   A long list starts folded (car-tyre-sizes.js). */
.car-sizes__intro {
  margin: 0 0 30px;
  text-align: center;
}

/* the size of the popular tyres' heading (header2), on one line where the page is wide enough */
.car-sizes__header {
  margin: 6px 0 0;
  text-wrap: balance;
}

/* "B-Max" on one line */
.car-sizes__word {
  white-space: nowrap;
}

.car-sizes__card {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 4px 28px;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(32, 32, 32, 0.05);
}

.car-sizes__row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  padding: 18px 0;
}

.car-sizes__row + .car-sizes__row {
  border-top: 1px solid #efefef;
}

/* level with the first line of pills */
.car-sizes__rim {
  padding-top: 4px;
  line-height: 1.2;
}

.car-sizes__rim strong {
  display: block;
  font-family: Montserrat, Inter, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #202020;
}

.car-sizes__rim span {
  font-size: 13px;
  color: #696969;
}

.car-sizes__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.car-sizes__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.car-sizes__list li::before {
  content: none;
}

.car-sizes__size {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px 0 16px;
  border: 1px solid #e1e1e1;
  border-radius: 13px;
  background: #fff;
  color: #202020;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

a.car-sizes__size::after {
  content: "";
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border: 1px solid #ff0801;
  border-radius: 50%;
  background: url("../img/icon-hero-how-arrow-red.svg") 50% 52% / 11px no-repeat;
}

a.car-sizes__size:hover,
a.car-sizes__size:focus-visible {
  border-color: #ff0801;
  color: #202020;
  text-decoration: none;
}

/* a size with no page of its own, or an older one like 155 R12 */
.car-sizes__size--plain {
  padding: 0 16px;
  border-color: #f0f1f3;
  background: #f5f6f8;
  color: #51555f;
}

/* a car with a different size on each axle */
.car-sizes__pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px 0 14px;
  border: 1px solid #e1e1e1;
  border-radius: 13px;
  background: #fff;
}

.car-sizes__pair .car-sizes__size {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.car-sizes__pair a.car-sizes__size:hover,
.car-sizes__pair a.car-sizes__size:focus-visible {
  color: #ff0801;
}

.car-sizes__pair .car-sizes__size + .car-sizes__axle {
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid #e1e1e1;
  line-height: 24px;
}

.car-sizes__axle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #696969;
}

/* folded: the first rows, whole - none cut off or faded - and "Show all ... sizes" under them; the
   rest open below (car-tyre-sizes.js) */
.car-sizes__card.is-folded .car-sizes__row--more {
  display: none;
}

.car-sizes__more,
.car-sizes__reg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin: 0;
  padding: 0 22px;
  border: 2px solid #ff0801;
  border-radius: 30px;
  background: #fff;
  color: #ff0801;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.car-sizes__more:hover,
.car-sizes__more:focus-visible,
.car-sizes__reg:hover,
.car-sizes__reg:focus-visible {
  background: #ff0801;
  color: #fff;
}

/* "Find my size by reg" is the section's main action: solid red with white text, darker on hover,
   as the site's own buttons (the user, 2026-11-07) */
.car-sizes__reg {
  background: #ff0801;
  color: #fff;
}

.car-sizes__reg:hover,
.car-sizes__reg:focus-visible {
  border-color: #dc0600;
  background: #dc0600;
  color: #fff;
}

.car-sizes__more {
  display: flex;
  margin: 6px auto 20px;
}

.car-sizes__more::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.car-sizes__more[aria-expanded="true"]::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.car-sizes__more[hidden],
.car-sizes__help[hidden] {
  display: none;
}

.car-sizes__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 26px;
  font-size: 15px;
  color: #51555f;
}

/* a short list: the wheel sizes side by side, on a card only as wide as they need */
@media (min-width: 768px) {
  .car-sizes__card--columns {
    display: flex;
    width: fit-content;
    max-width: 100%;
    padding: 4px 6px;
  }

  .car-sizes__card--columns .car-sizes__row {
    display: block;
    min-width: 186px;
    padding: 20px 22px 22px;
  }

  .car-sizes__card--columns .car-sizes__row + .car-sizes__row {
    border-top: 0;
    border-left: 1px solid #efefef;
  }

  .car-sizes__card--columns .car-sizes__rim {
    padding: 0 0 12px;
  }

  .car-sizes__card--columns .car-sizes__rim strong {
    display: inline;
  }

  .car-sizes__card--columns .car-sizes__list {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .car-sizes__intro {
    margin-bottom: 22px;
  }

  .car-sizes__card {
    padding: 2px 14px;
    border-radius: 14px;
  }

  .car-sizes__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    padding: 14px 0;
  }

  .car-sizes__rim {
    padding-top: 0;
  }

  .car-sizes__rim strong {
    display: inline;
    font-size: 16px;
  }

  .car-sizes__list {
    gap: 8px;
  }

  /* two to a line, the same width */
  .car-sizes__list li {
    flex: 0 1 calc(50% - 4px);
    min-width: 0;
  }

  .car-sizes__list .car-sizes__size {
    width: 100%;
    justify-content: space-between;
    padding: 0 10px 0 12px;
    font-size: 14px;
  }

  .car-sizes__list .car-sizes__size--plain {
    justify-content: center;
  }

  .car-sizes__list .car-sizes__pair {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 12px;
    padding: 10px 12px 10px 14px;
  }

  .car-sizes__pair .car-sizes__size {
    width: auto;
    padding: 0;
    justify-content: flex-start;
  }

  .car-sizes__pair .car-sizes__size + .car-sizes__axle {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .car-sizes__help {
    margin-top: 20px;
  }
}