/* Shared Service Centers component: compact card or full-width section. */
.sl-service-centers {
  --sl-centers-heading-size: var(--sl-font-size-heading-section);
  --sl-centers-heading-line: var(--sl-line-height-heading-section);
  --sl-centers-title-size: var(--sl-font-size-body-l);
  --sl-centers-title-line: var(--sl-line-height-body-l);
  --sl-centers-copy-size: var(--sl-font-size-body-m);
  --sl-centers-copy-line: var(--sl-line-height-body-m);
  border: 1px solid var(--sl-color-border-brand-subtle);
  border-radius: var(--sl-radius-card);
  background: var(--sl-color-surface-default);
  padding: var(--sl-space-6);
  box-sizing: border-box;
  min-width: 0;
  font-family: var(--sl-font-body);
}
.sl-service-centers--compact {
  --sl-centers-heading-size: var(--sl-font-size-heading-card-compact);
  --sl-centers-heading-line: var(--sl-line-height-heading-card-compact);
  --sl-centers-title-size: var(--sl-font-size-body-m);
  --sl-centers-title-line: var(--sl-line-height-body-m);
  --sl-centers-copy-size: var(--sl-font-size-body-s);
  --sl-centers-copy-line: var(--sl-line-height-body-s);
  padding: var(--sl-space-4);
}
.sl-service-centers--wide {
  --sl-centers-section-space: var(--sl-space-10);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin-block: var(--sl-centers-section-space);
  scroll-margin-top: calc(68px + var(--sl-space-4));
}
/* The truck catalog already owns a 48px/32px section rhythm. */
.sl-catalog-system--tires > .sl-service-centers--wide { margin-block: 0; }
.sl-service-centers--wide .sl-service-centers__row { background: var(--sl-ref-slate-100); border: 0; border-radius: var(--sl-radius-card); padding: var(--sl-space-4); box-sizing: border-box; min-width: 0; }
.sl-service-centers--wide .sl-service-centers__row + .sl-service-centers__row { margin-top: var(--sl-space-3); border-top: 0; }
.sl-service-centers .sl-service-centers__header { display: grid; gap: var(--sl-space-1); margin-bottom: var(--sl-space-3); }
.sl-service-centers .sl-service-centers__header h2 { margin: 0; font-family: var(--sl-font-display); font-size: var(--sl-centers-heading-size); line-height: var(--sl-centers-heading-line); font-weight: 500; color: var(--sl-color-text-brand); }
.sl-service-centers .sl-service-centers__header p { margin: 0; font: 400 var(--sl-centers-copy-size)/var(--sl-centers-copy-line) var(--sl-font-body); color: var(--sl-color-text-secondary); }
.sl-service-centers__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sl-space-3); padding-block: var(--sl-space-2); }
.sl-service-centers__row + .sl-service-centers__row { border-top: 1px solid var(--sl-color-border-default); }
.sl-service-centers .sl-service-centers__main { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: var(--sl-space-3); min-width: 0; min-height: var(--sl-target-min); color: var(--sl-color-text-primary); text-decoration: none; border-radius: var(--sl-radius-control); }
.sl-service-centers__main img { display: block; width: 84px; height: 52px; object-fit: cover; border-radius: var(--sl-radius-control); }
.sl-service-centers__main strong { display: block; font: 600 var(--sl-centers-title-size)/var(--sl-centers-title-line) var(--sl-font-body); }
.sl-service-centers__main small { display: block; margin-top: var(--sl-space-1); font: 400 var(--sl-centers-copy-size)/var(--sl-centers-copy-line) var(--sl-font-body); color: var(--sl-color-text-secondary); }
.sl-service-centers .sl-service-centers__route { display: inline-flex; align-items: center; justify-content: center; gap: var(--sl-space-2); min-height: var(--sl-target-min); padding-inline: var(--sl-space-2); border-radius: var(--sl-radius-control); font: 600 var(--sl-centers-copy-size)/var(--sl-centers-copy-line) var(--sl-font-body); color: var(--sl-color-text-brand); white-space: nowrap; }
.sl-service-centers__route i { width: 12px; height: 16px; flex: 0 0 12px; background: url('../images/catalog-ui/icon-chevron-right.svg') center / 8px 14px no-repeat; }
.sl-service-centers__main:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.sl-service-centers :is(.sl-service-centers__main, .sl-service-centers__route):focus-visible { outline: var(--sl-focus-outline); outline-offset: 2px; }
@media (min-width: 1024px) {
  .sl-service-centers--wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sl-space-6); }
  .sl-service-centers--wide .sl-service-centers__header { grid-column: 1 / -1; }
  .sl-service-centers--wide .sl-service-centers__row + .sl-service-centers__row { margin-top: 0; }
}
@media (max-width: 767px) {
  .sl-service-centers--wide { --sl-centers-section-space: var(--sl-space-8); --sl-centers-heading-size: var(--sl-font-size-heading-mobile-component); --sl-centers-heading-line: var(--sl-line-height-heading-mobile-component); scroll-margin-top: calc(48px + var(--sl-space-4)); }
}