/*
  Service Line design-system foundations.
  This file owns shared tokens and low-risk accessibility contracts only.
  Page modules keep their layout rules and consume these semantic variables.
*/

@font-face {
  font-display: swap;
  font-family: "RoadRadioLight";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/RoadRadio-Light.woff2") format("woff2"),
       url("../fonts/RoadRadio-Light.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "RoadRadioRegular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/RoadRadio.woff2") format("woff2"),
       url("../fonts/RoadRadio.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "RoadRadioBold";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/RoadRadio-Bold.woff2") format("woff2"),
       url("../fonts/RoadRadio-Bold.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "RoadRadioBlack";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/RoadRadio-Black.woff2") format("woff2"),
       url("../fonts/RoadRadio-Black.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/google/inter-400.woff2") format("woff2"),
       url("../fonts/google/inter-400.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 600 800;
  src: url("../fonts/google/inter-600.woff2") format("woff2"),
       url("../fonts/google/inter-600.ttf") format("truetype");
}

:root {
  /* Reference palette */
  --sl-ref-white: #fff;
  --sl-ref-black: #000;
  --sl-ref-slate-50: #f8fafc;
  --sl-ref-slate-100: #f1f5f9;
  --sl-ref-slate-200: #e2e8f0;
  --sl-ref-slate-300: #cbd5e1;
  --sl-ref-slate-400: #94a3b8;
  --sl-ref-slate-500: #64748b;
  --sl-ref-slate-600: #475569;
  --sl-ref-slate-700: #334155;
  --sl-ref-slate-900: #0f172a;
  --sl-ref-brand-50: #eef2ff;
  --sl-ref-brand-600: #005fea;
  --sl-ref-blue-600: var(--sl-ref-brand-600);
  --sl-ref-brand-800: #0b4292;
  --sl-ref-brand-900: #083a82;
  --sl-ref-brand-950: #00337f;
  --sl-ref-yellow-50: #fffbe3;
  --sl-ref-yellow-200: #f4e38b;
  --sl-ref-yellow-400: #ffed52;
  --sl-ref-yellow-hover: #fae850;
  --sl-ref-yellow-pressed: #f5e44f;
  --sl-ref-olive-700: #554b19;
  --sl-ref-olive-900: #2f2a10;
  --sl-ref-transparent: transparent;
  --sl-ref-white-a04: rgb(255 255 255 / 4%);
  --sl-ref-white-a08: rgb(255 255 255 / 8%);
  --sl-ref-white-a16: rgb(255 255 255 / 16%);
  --sl-ref-white-a40: rgb(255 255 255 / 40%);
  --sl-ref-white-a46: rgb(255 255 255 / 46%);
  --sl-ref-white-a94: rgb(255 255 255 / 94%);
  --sl-ref-teal-600: #0d9488;
  --sl-ref-teal-700: #0f766e;
  --sl-ref-red-600: #e53935;
  --sl-ref-red-700: #b91c1c;

  /* Semantic colour contract */
  --sl-color-text-primary: var(--sl-ref-slate-900);
  --sl-color-text-heading: var(--sl-color-text-primary);
  --sl-color-text-secondary: var(--sl-ref-slate-600);
  --sl-color-text-muted: var(--sl-ref-slate-600);
  --sl-color-text-placeholder: var(--sl-ref-slate-500);
  --sl-color-text-disabled: var(--sl-ref-slate-400);
  --sl-color-text-inverse: var(--sl-ref-white);
  --sl-color-text-brand: var(--sl-ref-brand-800);
  --sl-color-breadcrumb-link: var(--sl-color-text-brand);
  --sl-color-breadcrumb-current: var(--sl-ref-slate-600);
  --sl-color-breadcrumb-separator: var(--sl-ref-slate-600);
  --sl-color-surface-default: var(--sl-ref-white);
  --sl-color-surface-page: var(--sl-ref-slate-100);
  --sl-color-surface-subtle: var(--sl-ref-slate-50);
  --sl-color-surface-brand-soft: var(--sl-ref-brand-50);
  --sl-color-surface-brand-strong: var(--sl-ref-brand-800);
  --sl-color-surface-disabled: var(--sl-ref-slate-100);
  --sl-color-surface-highlight: var(--sl-ref-yellow-400);
  --sl-color-surface-highlight-soft: var(--sl-ref-yellow-50);
  --sl-color-surface-highlight-hover: var(--sl-ref-yellow-hover);
  --sl-color-surface-highlight-pressed: var(--sl-ref-yellow-pressed);
  --sl-color-surface-inverse-default: var(--sl-ref-transparent);
  --sl-color-surface-inverse-hover: var(--sl-ref-white-a08);
  --sl-color-surface-inverse-pressed: var(--sl-ref-white-a16);
  --sl-color-surface-inverse-disabled: var(--sl-ref-white-a04);
  --sl-color-surface-frosted: var(--sl-ref-white-a94);
  --sl-color-surface-info: #edf2fa;
  --sl-color-surface-scrim: rgba(15, 23, 42, .62);
  --sl-color-surface-success: #eaf8ef;
  --sl-color-surface-error: #fff7f7;
  --sl-color-action-primary-default: var(--sl-ref-brand-800);
  --sl-color-action-primary-hover: var(--sl-ref-brand-900);
  --sl-color-action-primary-pressed: var(--sl-ref-brand-950);
  --sl-color-action-primary-disabled: var(--sl-ref-slate-200);
  --sl-color-action-on-primary: var(--sl-ref-white);
  --sl-color-border-default: var(--sl-ref-slate-200);
  --sl-color-border-subtle: var(--sl-ref-slate-200);
  --sl-color-border-medium: var(--sl-ref-slate-300);
  --sl-color-border-strong: var(--sl-ref-slate-500);
  --sl-color-border-brand-subtle: #d9e4f5;
  --sl-color-border-brand: #becdff;
  --sl-color-border-product-card: #c7d9f9;
  --sl-color-border-highlight: #e3ca2d;
  --sl-color-border-highlight-soft: var(--sl-ref-yellow-200);
  --sl-color-border-inverse-default: var(--sl-ref-white-a46);
  --sl-color-border-inverse-disabled: var(--sl-ref-white-a16);
  --sl-color-border-error: var(--sl-ref-red-600);
  --sl-breadcrumb-font-size: 12px;
  --sl-breadcrumb-line-height: 16px;
  --sl-breadcrumb-gap: var(--sl-space-1);
  --sl-color-border-error-soft: #f1c9c9;
  --sl-color-text-success: #128a3d;
  --sl-color-text-error: #c13535;
  --sl-color-text-on-highlight: var(--sl-ref-olive-700);
  --sl-color-text-on-highlight-strong: var(--sl-ref-olive-900);
  --sl-color-text-inverse-disabled: var(--sl-ref-white-a40);
  --sl-color-icon-primary: var(--sl-ref-slate-900);
  --sl-color-icon-secondary: var(--sl-ref-slate-600);
  --sl-color-icon-inverse: var(--sl-ref-white);
  --sl-color-icon-brand: var(--sl-ref-brand-800);
  --sl-color-icon-disabled: var(--sl-ref-slate-400);
  --sl-color-status-success-foreground: var(--sl-ref-teal-700);
  --sl-color-status-warning-surface: var(--sl-ref-yellow-400);
  --sl-color-status-error-foreground: var(--sl-ref-red-700);
  --sl-color-border-brand-strong: var(--sl-ref-brand-600);
  --sl-color-focus-ring: var(--sl-ref-brand-600);
  --sl-color-focus-ring-inverse: var(--sl-ref-white);

  /*
    TireProductMedia contract.
    Only real tire/product photography may consume these values. The image is
    composited onto the owning card/hero surface; brand logos, promo icons and
    editorial imagery must stay in normal blend mode.
  */
  --sl-tire-media-blend-mode: multiply;
  --sl-tire-media-filter: none;
  --sl-tire-media-opacity: 1;
  --sl-tire-hero-media-height-mobile: 120px;
  --sl-tire-hero-media-width-mobile: 77.55%;

  /* Spacing, radius and control density */
  --sl-space-0: 0;
  --sl-space-1: 4px;
  --sl-space-2: 8px;
  --sl-space-3: 12px;
  --sl-space-4: 16px;
  --sl-space-5: 20px;
  --sl-space-6: 24px;
  --sl-space-7: 28px;
  --sl-space-8: 32px;
  --sl-space-10: 40px;
  --sl-space-12: 48px;
  --sl-space-16: 64px;
  --sl-radius-4: 4px;
  --sl-radius-6: 6px;
  --sl-radius-7: 7px;
  --sl-radius-8: 8px;
  --sl-radius-12: 12px;
  --sl-radius-16: 16px;
  --sl-radius-20: 20px;
  --sl-radius-full: 9999px;
  --sl-radius-control: var(--sl-radius-8);
  --sl-radius-card: var(--sl-radius-12);
  --sl-radius-card-featured: var(--sl-radius-16);
  --sl-radius-modal: var(--sl-radius-16);
  --sl-radius-product-hero-mobile: var(--sl-radius-20);
  --sl-radius-pill: var(--sl-radius-full);
  --sl-radius-segmented-inner: var(--sl-radius-7);
  --sl-control-compact: 28px;
  --sl-control-sm: 36px;
  --sl-control-md: 44px;
  --sl-chip-visual-height: 32px;
  --sl-target-min: 44px;
  --sl-size-badge: 24px;

  /*
    Responsive page grid.
    Header content, full-bleed hero content and ordinary page sections must all
    use this same inline inset. Backgrounds may bleed to the viewport, content
    may not. The 1200px content column is the site-wide desktop contract.
  */
  --sl-layout-content-max: 1200px;
  /*
    Inner content rail for 1200px surfaces with the standard 24px component
    padding on each side. Header controls and unboxed Hero content align to
    this rail, while panel backgrounds continue to use the 1200px surface.
  */
  --sl-layout-rail-max: 1152px;
  --sl-layout-gutter: 16px;
  --sl-layout-inline: max(
    var(--sl-layout-gutter),
    calc((100% - var(--sl-layout-content-max)) / 2)
  );
  --sl-layout-rail-inline: max(
    var(--sl-layout-gutter),
    calc((100% - var(--sl-layout-rail-max)) / 2)
  );
  /* Use only on a true 100vw full-bleed surface (catalog/search hero). */
  --sl-layout-viewport-inline: max(
    var(--sl-layout-gutter),
    calc((100vw - var(--sl-layout-content-max)) / 2)
  );

  /* Typography */
  --sl-font-display: "RoadRadioBold", "Inter", Arial, sans-serif;
  --sl-font-display-regular: "RoadRadioRegular", "Inter", Arial, sans-serif;
  --sl-font-display-light: "RoadRadioLight", "Inter", Arial, sans-serif;
  --sl-font-display-black: "RoadRadioBlack", "Inter", Arial, sans-serif;
  --sl-font-action: var(--sl-font-display);
  --sl-font-body: "Inter", Arial, sans-serif;
  --sl-font-control: var(--sl-font-body);
  /* Interactive Chip: shared by catalog filters and Smart Search suggestions. */
  --sl-chip-font-family: var(--sl-font-body);
  --sl-chip-font-size: 12px;
  --sl-chip-font-weight: 500;
  --sl-chip-line-height: 16px;
  --sl-chip-padding-block: 7px;
  --sl-chip-padding-inline: 12px;
  --sl-chip-background: var(--sl-color-surface-default);
  --sl-chip-color: var(--sl-color-text-primary);
  --sl-chip-border-color: var(--sl-color-border-brand-subtle);
  --sl-chip-hover-background: var(--sl-color-surface-brand-soft);
  --sl-chip-hover-color: var(--sl-color-text-brand);
  --sl-chip-hover-border-color: var(--sl-color-border-brand);
  --sl-chip-selected-background: var(--sl-color-action-primary-default);
  --sl-chip-selected-color: var(--sl-color-action-on-primary);
  --sl-chip-selected-border-color: var(--sl-color-action-primary-default);
  --sl-font-size-body-l: 16px;
  --sl-line-height-body-l: 24px;
  --sl-font-size-body-m: 14px;
  --sl-line-height-body-m: 20px;
  --sl-font-size-body-s: 12px;
  --sl-line-height-body-s: 16px;
  --sl-font-size-heading-card-compact: 18px;
  --sl-line-height-heading-card-compact: 24px;
  --sl-font-size-heading-mobile-standard: 24px;
  --sl-line-height-heading-mobile-standard: 28px;
  --sl-font-size-heading-mobile-component: 20px;
  --sl-line-height-heading-mobile-component: 24px;
  --sl-font-size-heading-mobile-accent: 28px;
  --sl-line-height-heading-mobile-accent: 32px;
  --sl-font-size-heading-page: 36px;
  --sl-line-height-heading-page: 40px;
  --sl-font-size-heading-section: 28px;
  --sl-line-height-heading-section: 32px;

  /* Elevation, focus and motion */
  --sl-shadow-card-quiet: 0 8px 18px rgba(20, 56, 118, .06);
  --sl-shadow-card-flat: 0 1px 2px rgba(0, 0, 0, .05);
  --sl-shadow-card-resting: 0 8px 22px rgba(11, 66, 146, .08);
  --sl-shadow-card-hover: 0 10px 26px rgba(11, 66, 146, .12);
  --sl-shadow-segmented-selected: inset 0 0 0 1px var(--sl-color-border-brand-subtle), 0 2px 8px rgba(11, 66, 146, .12);
  --sl-shadow-segmented-focus: 0 0 0 3px rgba(11, 66, 146, .16), var(--sl-shadow-segmented-selected);
  --sl-shadow-focus-soft: 0 0 0 3px rgba(0, 95, 234, .12);
  --sl-shadow-modal: 0 24px 64px rgba(12, 46, 96, .24);
  --sl-focus-outline: 2px solid var(--sl-color-focus-ring);
  --sl-focus-outline-inverse: 2px solid var(--sl-color-focus-ring-inverse);
  --sl-motion-fast: 160ms;
  --sl-motion-easing: ease;
}

@media (min-width: 768px) {
  :root {
    --sl-layout-gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --sl-layout-gutter: 32px;
  }
}

/*
  Compatibility bridge for legacy NetCat wrappers.
  Modern page families use their own full-bleed surfaces, but any remaining
  legacy wrapper must share the same 1200px column instead of the old 1024px
  desktop width. Component-specific media wrappers keep their own sizing.
*/
:where(body.sl-site-page, body.sl-home-redesign-page) #wrapper > .wrapper {
  max-width: var(--sl-layout-content-max, 1200px);
  width: calc(100% - (2 * var(--sl-layout-gutter, 16px)));
}

:where(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope) {
  color: var(--sl-color-text-primary);
  font-family: var(--sl-font-body);
}

/* Page-title role. Product, catalog-compact and marketing heroes keep named profiles. */
html body :is(
  .sl-type-page-title,
  .sl-site-title,
  .sl-home-hero h1,
  .sl-service-hub__hero h1,
  .sl-service-hero h1,
  .sl-eva-hero h1,
  .sl-content-hero h1,
  .sl-catalog-disk-category-intro h1,
  .sl-site-content > .context > h1
) {
  font-family: var(--sl-font-display) !important;
  font-size: var(--sl-font-size-heading-page) !important;
  font-weight: 500 !important;
  line-height: var(--sl-line-height-heading-page) !important;
}

@media (max-width: 767px) {
  html body :is(
    .sl-type-page-title,
    .sl-site-title,
    .sl-home-hero h1,
    .sl-service-hub__hero h1,
    .sl-service-hero h1,
    .sl-eva-hero h1,
    .sl-content-hero h1,
    .sl-catalog-disk-category-intro h1,
    .sl-site-content > .context > h1
  ) {
    font-size: var(--sl-font-size-heading-mobile-standard) !important;
    line-height: var(--sl-line-height-heading-mobile-standard) !important;
  }
}

/* Named component-title roles preserve their purposeful hierarchy. */
html body .sl-type-card-title,
html body .sl-content-card h2 {
  font-family: var(--sl-font-display) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
}

html body .sl-type-contact-title,
html body .sl-contact-center__title {
  font-family: var(--sl-font-display) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 28px !important;
}

html body .sl-type-marketing-section-title,
html body .sl-fleet-page .sl-service-centers--wide .sl-service-centers__header h2,
html body :is(.sl-fleet-section__head h2, .sl-fleet-request__copy h2) {
  font-family: var(--sl-font-display) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 34px !important;
}

html body .sl-type-product-section-title,
html body .sl-tire-sku .sl-service-centers--wide .sl-service-centers__header h2,
html body :is(.sl-tire-sku__section > h2, .sl-tire-sku__specs > h2) {
  font-family: var(--sl-font-display) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 28px !important;
}

@media (max-width: 767px) {
  html body .sl-type-card-title,
  html body .sl-content-card h2 {
    font-size: 18px !important;
    line-height: 22px !important;
  }

  html body .sl-type-marketing-section-title,
  html body .sl-fleet-page .sl-service-centers--wide .sl-service-centers__header h2,
  html body :is(.sl-fleet-section__head h2, .sl-fleet-request__copy h2) {
    font-size: 24px !important;
    line-height: 28px !important;
  }

  html body .sl-type-product-section-title,
  html body .sl-tire-sku .sl-service-centers--wide .sl-service-centers__header h2,
  html body :is(.sl-tire-sku__section > h2, .sl-tire-sku__specs > h2) {
    font-size: 18px !important;
    line-height: 24px !important;
  }
}

/* Standard section title; card, footer, dialog and marketing titles are separate roles. */
/* Shared centers use the host heading role; the Compact variant is unchanged. */
html body .sl-service-centers--wide .sl-service-centers__header h2,
html body :is(
  .sl-type-section-title,
  .sl-service-module h2,
  .sl-catalog-module__head h2,
  .sl-catalog-module > h2,
  .sl-site-content > .context > h2
) {
  font-family: var(--sl-font-display) !important;
  font-size: var(--sl-font-size-heading-section) !important;
  font-weight: 500 !important;
  line-height: var(--sl-line-height-heading-section) !important;
}

@media (max-width: 767px) {
  html body .sl-service-centers--wide .sl-service-centers__header h2,
  html body :is(
    .sl-type-section-title,
    .sl-service-module h2,
    .sl-catalog-module__head h2,
    .sl-catalog-module > h2,
    .sl-site-content > .context > h2
  ) {
    font-size: var(--sl-font-size-heading-mobile-component) !important;
    line-height: var(--sl-line-height-heading-mobile-component) !important;
  }
}

/*
  Action typography contract.
  Buttons use RoadRadio across page families; form fields and body copy keep
  Inter. The selectors include native controls and anchor-based button
  primitives without changing their geometry or interaction states.
*/
html body:is(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope)
  :is(button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]),
html body:is(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope)
  :is(a.btn, a[class*="-button"], a[class*="__button"], a[class*="-btn"], a[class*="__btn"], a[class*="-cta"], a[class*="__cta"], a.sl-catalog-primary, a.sl-catalog-secondary, a.sl-tire-sku__primary, a.sl-tire-sku__secondary) {
  font-family: var(--sl-font-action) !important;
}

/* RoadRadio optical alignment without changing the segmented hit area. */
.sl-segmented--canonical .sl-segmented__label {
  display: block;
  transform: translateY(1px);
}

/* Shared action buttons. Page styles own placement, never variant states. */
html body :is(.sl-button-primary, .sl-button-secondary, .sl-button-tertiary, .sl-button-highlight, .sl-button-inverse) {
  align-items: center;
  appearance: none;
  background: var(--sl-color-surface-default);
  border: var(--sl-button-border-width, 1px) solid var(--sl-button-border, var(--sl-color-border-brand-subtle));
  border-radius: var(--sl-button-radius, var(--sl-radius-control));
  box-sizing: border-box;
  color: var(--sl-button-foreground, var(--sl-color-text-brand));
  cursor: pointer;
  display: inline-flex;
  font: var(--sl-button-weight, 400) var(--sl-button-size, 14px)/var(--sl-button-line-height, 20px) var(--sl-font-action);
  gap: var(--sl-button-gap, var(--sl-space-2));
  justify-content: center;
  min-height: var(--sl-button-min-height, var(--sl-target-min));
  padding: var(--sl-button-padding-block, var(--sl-space-3)) var(--sl-button-padding-inline, var(--sl-space-4));
  text-align: center;
  text-decoration: none;
  text-transform: var(--sl-button-text-transform, uppercase);
  white-space: var(--sl-button-white-space, normal);
  transition: background-color var(--sl-motion-fast) var(--sl-motion-easing), border-color var(--sl-motion-fast) var(--sl-motion-easing), color var(--sl-motion-fast) var(--sl-motion-easing);
}

html body .sl-button-primary {
  background: var(--sl-color-action-primary-default);
  border-color: var(--sl-button-primary-border, transparent);
  color: var(--sl-color-action-on-primary);
}

html body .sl-button-secondary {
  background: var(--sl-button-secondary-background, var(--sl-color-surface-default));
}

html body .sl-button-tertiary {
  background: var(--sl-button-tertiary-background, var(--sl-color-surface-subtle));
  border-color: transparent;
}

html body .sl-button-highlight {
  background: var(--sl-color-surface-highlight);
  border-color: var(--sl-button-highlight-border, var(--sl-color-surface-highlight));
  color: var(--sl-button-highlight-foreground, var(--sl-color-text-primary));
}

html body .sl-button-inverse {
  background: var(--sl-color-surface-inverse-default);
  border-color: var(--sl-color-border-inverse-default);
  color: var(--sl-color-text-inverse);
}

html body :is(.sl-button-primary, .sl-button-secondary, .sl-button-tertiary).sl-button-compact {
  font-size: 13px;
  line-height: 18px;
}

/* Opt-in migration profile: preserves checkout geometry, shares button states. */
.sl-button-checkout {
  --sl-button-size: 15px;
  --sl-button-line-height: 18px;
  --sl-button-weight: 700;
  --sl-button-gap: 0px;
  --sl-button-min-height: var(--sl-control-md);
  --sl-button-padding-block: 0px;
  --sl-button-padding-inline: 20px;
  --sl-button-border: var(--sl-color-border-default);
  --sl-button-text-transform: none;
  --sl-button-focus-offset: 2px;
}

.sl-button-checkout.sl-button-ghost {
  --sl-button-border: transparent;
  --sl-button-foreground: var(--sl-color-text-secondary);
  --sl-button-tertiary-background: var(--sl-color-surface-disabled);
}

.sl-button-checkout.sl-button-checkout-update {
  --sl-button-size: 16px;
  --sl-button-line-height: normal;
  --sl-button-weight: 400;
}

.sl-button-checkout.sl-button-checkout-step {
  --sl-button-size: 16px;
  --sl-button-line-height: normal;
  --sl-button-weight: 400;
}

.sl-checkout-legal .sl-button-checkout[data-sl-submit-label] {
  --sl-button-size: 13px;
  --sl-button-line-height: 1.45;
  --sl-button-weight: 400;
}

.sl-checkout-summary > .sl-button-checkout[data-sl-submit-label] {
  --sl-button-size: 16px;
  --sl-button-line-height: normal;
  --sl-button-weight: 400;
}

/* Preserved profiles for explicitly migrated filter/SKU consumers. */
.sl-button-catalog {
  --sl-button-size: 16px;
  --sl-button-line-height: 24px;
  --sl-button-weight: 600;
  --sl-button-gap: 0px;
  --sl-button-padding-block: 10px;
  --sl-button-padding-inline: 18px;
  --sl-button-border-width: 0px;
  --sl-button-text-transform: none;
  --sl-button-white-space: nowrap;
}

.sl-button-catalog-secondary {
  --sl-button-size: 15px;
  --sl-button-line-height: 1.15;
  --sl-button-weight: 500;
  --sl-button-gap: 0px;
  --sl-button-min-height: 46px;
  --sl-button-padding-block: 12px;
  --sl-button-padding-inline: 18px;
  --sl-button-border: #b9cbff;
  --sl-button-radius: 10px;
  --sl-button-text-transform: uppercase;
}

.sl-button-disclosure {
  --sl-button-size: 16px;
  --sl-button-line-height: normal;
  --sl-button-weight: 400;
  --sl-button-gap: 0px;
  --sl-button-padding-block: 8px;
  --sl-button-padding-inline: 12px;
  --sl-button-border-width: 0px;
  --sl-button-text-transform: none;
}

.sl-button-disclosure-catalog {
  --sl-button-min-height: 36px;
  --sl-button-tertiary-background: var(--sl-color-surface-disabled);
  --sl-button-foreground: var(--sl-color-text-secondary);
}

.sl-button-disclosure-service {
  --sl-button-min-height: var(--sl-control-md);
  --sl-button-tertiary-background: var(--sl-color-surface-subtle);
  --sl-button-foreground: var(--sl-color-text-primary);
}

.sl-button-sku-text {
  --sl-button-size: 16px;
  --sl-button-line-height: normal;
  --sl-button-weight: 400;
  --sl-button-gap: 0px;
  --sl-button-min-height: var(--sl-control-md);
  --sl-button-padding-block: 0px;
  --sl-button-padding-inline: 16px;
  --sl-button-border: var(--sl-color-border-strong);
  --sl-button-foreground: var(--sl-color-text-brand);
  --sl-button-secondary-background: transparent;
  --sl-button-text-transform: none;
}

@media (max-width: 959px) {
  .sl-button-sku-text {
    --sl-button-size: 14px;
    --sl-button-line-height: 16px;
    --sl-button-weight: 700;
  }
}

.sl-button-spare-search {
  --sl-button-size: 14px;
  --sl-button-line-height: 18px;
  --sl-button-weight: 700;
  --sl-button-gap: 0px;
  --sl-button-min-height: 52px;
  --sl-button-padding-block: 10px;
  --sl-button-padding-inline: 18px;
  --sl-button-primary-border: var(--sl-color-action-primary-default);
  --sl-button-radius: 0 var(--sl-radius-control) var(--sl-radius-control) 0;
  --sl-button-text-transform: none;
}

.sl-button-spare-action {
  --sl-button-size: 14px;
  --sl-button-line-height: 18px;
  --sl-button-weight: 700;
  --sl-button-gap: 0px;
  --sl-button-min-height: var(--sl-control-md);
  --sl-button-padding-block: 10px;
  --sl-button-padding-inline: 18px;
  --sl-button-primary-border: var(--sl-color-action-primary-default);
  --sl-button-text-transform: none;
}

.sl-button-contact {
  --sl-button-size: 13px;
  --sl-button-line-height: 18px;
  --sl-button-weight: 700;
  --sl-button-gap: 0px;
  --sl-button-min-height: var(--sl-control-md);
  --sl-button-padding-block: 8px;
  --sl-button-padding-inline: 10px;
  --sl-button-primary-border: var(--sl-color-action-primary-default);
  --sl-button-text-transform: none;
}

.sl-button-site-search {
  --sl-button-size: 16px;
  --sl-button-line-height: normal;
  --sl-button-weight: 400;
  --sl-button-gap: 0px;
  --sl-button-min-height: var(--sl-control-md);
  --sl-button-padding-block: 11px;
  --sl-button-padding-inline: 16px;
  --sl-button-primary-border: var(--sl-color-action-primary-default);
  --sl-button-text-transform: none;
}

.sl-button-sku {
  --sl-button-highlight-border: transparent;
  --sl-button-size: 14px;
  --sl-button-line-height: 16px;
  --sl-button-weight: 700;
  --sl-button-gap: 0px;
  --sl-button-padding-block: 0px;
  --sl-button-padding-inline: 16px;
  --sl-button-text-transform: none;
  --sl-button-focus-offset: 2px;
}

.sl-button-fleet {
  --sl-button-highlight-border: transparent;
  --sl-button-highlight-foreground: var(--sl-color-text-brand);
  --sl-button-size: 14px;
  --sl-button-line-height: 20px;
  --sl-button-weight: 400;
  --sl-button-padding-block: 10px;
  --sl-button-padding-inline: 20px;
  --sl-button-text-transform: none;
}

.sl-button-service {
  --sl-button-size: 16px;
  --sl-button-line-height: 24px;
  --sl-button-weight: 700;
  --sl-button-gap: 0px;
  --sl-button-padding-block: 10px;
  --sl-button-padding-inline: 16px;
  --sl-button-border-width: 0px;
  --sl-button-highlight-foreground: var(--sl-color-text-brand);
  --sl-button-text-transform: none;
}

.sl-button-service.sl-button-secondary {
  --sl-button-border-width: 1px;
  --sl-button-border: var(--sl-color-border-strong);
  --sl-button-foreground: var(--sl-color-text-primary);
}

.sl-button-service.sl-eva-product-card__button {
  --sl-button-line-height: normal;
  --sl-button-weight: 400;
  --sl-button-padding-block: 8px;
  --sl-button-padding-inline: 12px;
}

/* Existing emphasized equipment link keeps its weight during migration. */
.sl-button-fleet.sl-button-emphasized {
  --sl-button-weight: 700;
}

@media (max-width: 767px) {
  .sl-button-checkout {
    --sl-button-min-height: 48px;
  }
}

@media (max-width: 768px) {
  .sl-button-disclosure-catalog {
    --sl-button-min-height: var(--sl-control-md);
  }
}

@media (hover: hover) {
  html body .sl-button-primary:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--sl-color-action-primary-hover);
  }

  html body .sl-button-secondary:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--sl-color-surface-brand-soft);
    border-color: var(--sl-color-border-brand);
    color: var(--sl-color-text-brand);
  }

  html body .sl-button-tertiary:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--sl-color-action-primary-default);
    border-color: transparent;
    color: var(--sl-color-action-on-primary);
  }

  html body .sl-button-tertiary.sl-button-disclosure:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--sl-color-surface-brand-soft);
    border-color: transparent;
    color: var(--sl-color-text-brand);
  }

  html body .sl-button-highlight:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--sl-color-surface-highlight-hover);
  }

  html body .sl-button-inverse:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--sl-color-surface-inverse-hover);
    border-color: var(--sl-color-text-inverse);
  }
}

@media (hover: hover) and (pointer: fine) {
  html body .sl-button-highlight.sl-button-sku:not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-1px);
  }
}

html body .sl-button-highlight:not(:disabled):not([aria-disabled="true"]):active {
  background: var(--sl-color-surface-highlight-pressed);
}

html body .sl-button-highlight.sl-button-sku:not(:disabled):not([aria-disabled="true"]):active,
html body .sl-button-primary.sl-button-sku:not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px);
}

html body .sl-button-inverse:not(:disabled):not([aria-disabled="true"]):active {
  background: var(--sl-color-surface-inverse-pressed);
  border-color: var(--sl-color-text-inverse);
}

html body :is(.sl-button-primary, .sl-button-tertiary):not(:disabled):not([aria-disabled="true"]):active {
  background: var(--sl-color-action-primary-pressed);
  border-color: transparent;
  color: var(--sl-color-action-on-primary);
}

html body .sl-button-tertiary.sl-button-disclosure:not(:disabled):not([aria-disabled="true"]):active {
  background: var(--sl-color-surface-info);
  border-color: transparent;
  color: var(--sl-color-text-brand);
}

html body .sl-button-secondary:not(:disabled):not([aria-disabled="true"]):active {
  background: var(--sl-color-surface-brand-soft);
  background: color-mix(in srgb, var(--sl-color-surface-brand-soft) 85%, var(--sl-color-action-primary-default));
  border-color: var(--sl-color-border-brand-strong);
  color: var(--sl-color-text-brand);
}

html body :is(.sl-button-primary, .sl-button-secondary, .sl-button-tertiary, .sl-button-highlight, .sl-button-inverse):focus-visible {
  outline: var(--sl-focus-outline);
  outline-offset: var(--sl-button-focus-offset, var(--sl-space-1));
}

html body .sl-button-inverse:focus-visible {
  outline-color: var(--sl-color-focus-ring-inverse);
}

html body :is(.sl-button-primary, .sl-button-secondary, .sl-button-tertiary, .sl-button-highlight, .sl-button-inverse):is(:disabled, [aria-disabled="true"]) {
  background: var(--sl-color-surface-disabled);
  border-color: transparent;
  color: var(--sl-color-text-disabled);
  cursor: not-allowed;
  filter: none;
  transform: none;
}

html body .sl-button-highlight:is(:disabled, [aria-disabled="true"]) {
  background: var(--sl-color-surface-highlight-soft);
  border-color: var(--sl-color-border-highlight-soft);
  color: var(--sl-color-text-on-highlight);
}

html body .sl-button-inverse:is(:disabled, [aria-disabled="true"]) {
  background: var(--sl-color-surface-inverse-disabled);
  border-color: var(--sl-color-border-inverse-disabled);
  color: var(--sl-color-text-inverse-disabled);
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.sl-button-primary, .sl-button-secondary, .sl-button-tertiary, .sl-button-highlight, .sl-button-inverse) {
    transition: none;
  }
}

/*
  Choice-control typography contract.
  Selects are data-scanning controls, not calls to action: their current value,
  search field and option list use Inter even when a custom Select is rendered
  as a button. RoadRadio remains reserved for actions and segmented controls.
*/
html body:is(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope)
  :is(select, option, optgroup),
html body:is(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope)
  :is(button.sl-searchable-select__button, button.sl-searchable-select__option),
html body:is(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope)
  .sl-searchable-select :is(input, .sl-searchable-select__empty) {
  font-family: var(--sl-font-control) !important;
  text-transform: none;
}

/* Canonical Segmented Control container surface: Figma color/surface/page. */
html body .sl-home-redesign .sl-filter-tabs,
html body .sl-home-redesign .sl-offer-tabs,
html body .sl-home-redesign .sl-catalog-special-tabs--canonical,
html body .sl-catalog-system .sl-catalog-product-tabs,
html body .sl-catalog-system .sl-catalog-mode-tabs,
html body .sl-catalog-system .sl-catalog-special-tabs,
html body .sl-service-tabs,
html body .sl-ds-segmented,
html body .sl-checkout-stepper {
  background: var(--sl-color-surface-page) !important;
}

html body .sl-home-redesign .sl-filter-tabs button[aria-selected="true"],
html body .sl-home-redesign .sl-offer-tabs button[aria-selected="true"],
html body .sl-home-redesign .sl-catalog-special-tabs--canonical .sl-catalog-special-tab.is-active,
html body .sl-catalog-system .sl-catalog-mode-tabs .sl-catalog-segment.is-active,
html body .sl-catalog-system .sl-catalog-special-tabs .sl-catalog-special-tab.is-active,
html body .sl-service-tabs button.is-active,
html body .sl-ds-segmented .sl-ds-segmented__item.is-active,
html body .sl-checkout[data-sl-step="1"] .sl-checkout-stepper__item[data-step="1"],
html body .sl-checkout[data-sl-step="2"] .sl-checkout-stepper__item[data-step="2"],
html body .sl-checkout[data-sl-step="3"] .sl-checkout-stepper__item[data-step="3"] {
  box-shadow: var(--sl-shadow-segmented-selected) !important;
  color: var(--sl-color-text-brand) !important;
}

.sl-eva-page .sl-eva-kit-field {
  border: 0;
  gap: 6px;
  margin: 0;
  min-inline-size: 0;
  padding: 0;
}

.sl-eva-page .sl-eva-kit-panel {
  gap: var(--sl-space-4);
  padding: var(--sl-space-4);
}

.sl-eva-page .sl-eva-kit-panel > [data-sl-request-configurator-action] {
  align-self: stretch;
  grid-column: 1 / -1;
  margin-top: 0;
  width: 100%;
}

.sl-eva-page .sl-eva-kit-field__label {
  padding: 0;
}

.sl-eva-page .sl-eva-kit-options label {
  cursor: pointer;
  display: inline-flex;
  position: relative;
}

.sl-eva-page .sl-eva-kit-options input[type="radio"] {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sl-eva-page .sl-eva-kit-options label > span {
  cursor: pointer;
  transition: background-color var(--sl-motion-fast) var(--sl-motion-easing), border-color var(--sl-motion-fast) var(--sl-motion-easing), box-shadow var(--sl-motion-fast) var(--sl-motion-easing), color var(--sl-motion-fast) var(--sl-motion-easing);
}

.sl-eva-page .sl-eva-kit-options label:hover > span {
  background: var(--sl-color-surface-brand-soft);
  border-color: var(--sl-color-border-brand);
  color: var(--sl-color-text-brand);
}

.sl-eva-page .sl-eva-kit-options input[type="radio"]:checked + span {
  background: var(--sl-color-action-primary-default);
  border-color: var(--sl-color-action-primary-default);
  box-shadow: var(--sl-shadow-segmented-selected);
  color: var(--sl-color-action-on-primary);
}

.sl-eva-page .sl-eva-kit-options input[type="radio"]:focus-visible + span {
  box-shadow: var(--sl-shadow-segmented-focus);
  outline: none;
}

.sl-eva-page .sl-eva-kit-field.is-error > .sl-eva-kit-field__label {
  color: var(--sl-ref-red-600);
}

.sl-eva-page .sl-eva-kit.is-ready .sl-eva-kit-note {
  background: var(--sl-color-surface-brand-soft);
  border-color: var(--sl-color-border-brand-subtle);
  color: var(--sl-color-text-primary);
}

.sl-eva-page .sl-eva-kit [data-sl-request-configurator-action][aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
}

/* Shared Navigation Row: one DS chevron, consistently right-aligned. */
html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a {
  align-items: center;
  border: 1px solid transparent;
  box-sizing: border-box;
  column-gap: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  transition: border-color var(--sl-motion-fast) var(--sl-motion-easing);
}

@media (hover: hover) and (pointer: fine) {
  html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a:not([aria-disabled="true"]):hover {
    border-color: var(--sl-color-border-brand);
  }
}

html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a:focus-visible {
  outline: var(--sl-focus-outline);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a {
    transition: none;
  }
}

html body :is(.sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a {
  align-content: center;
  row-gap: var(--sl-space-1);
}
html body :is(.sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a > strong {
  font: 600 var(--sl-font-size-body-m)/var(--sl-line-height-body-m) var(--sl-font-body);
}
html body :is(.sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a > small {
  color: var(--sl-color-text-secondary);
  font: 400 var(--sl-font-size-body-s)/var(--sl-line-height-body-s) var(--sl-font-body);
}

html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a > strong,
html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a > small {
  grid-column: 1;
  min-width: 0;
  padding-right: 0;
}

html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a::after {
  align-self: center;
  background: url("../images/catalog-ui/icon-chevron-right.svg?v=2") center / 9px 16px no-repeat;
  border: 0;
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  height: 18px;
  justify-self: end;
  transform: none;
  width: 18px;
}

/* EVA pages already own the viewport gutter; avoid a second service-module inset. */
@media (max-width: 768px) {
  body.sl-service-redesign-page .sl-eva-page > :not(.sl-service-hero):not(.sl-catalog-footer) {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  body.sl-service-redesign-page .sl-eva-page > .sl-service-hero {
    padding-left: var(--sl-layout-gutter, 16px);
    padding-right: var(--sl-layout-gutter, 16px);
  }

  html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid {
    gap: 6px;
    grid-template-columns: minmax(0, 1fr);
  }

  html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a {
    align-items: center;
    column-gap: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    grid-template-rows: auto auto;
    min-height: 60px;
    padding: 10px 12px;
    row-gap: 2px;
    width: 100%;
  }

  html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a > strong,
  html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a > small {
    grid-column: 1;
    min-width: 0;
    padding-right: 0;
  }

  html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a > strong {
    font-size: 14px;
    line-height: 18px;
  }

  html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a > small {
    display: -webkit-box;
    font-size: 13px;
    line-height: 17px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html body :is(.sl-service-page, .sl-catalog-system, .sl-content-hub, .sl-article) .sl-service-link-grid > a::after {
    align-self: center;
    background: url("../images/catalog-ui/icon-chevron-right.svg?v=2") center / 9px 16px no-repeat;
    border: 0;
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    height: 18px;
    justify-self: end;
    transform: none;
    width: 18px;
  }
}

/* Shared monochrome icons: fixed pixel geometry, inherited semantic color. */
.sl-icon {
  background-color: currentColor;
  display: inline-block;
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
  -webkit-mask: var(--sl-icon-source) center / contain no-repeat;
  mask: var(--sl-icon-source) center / contain no-repeat;
  vertical-align: middle;
  pointer-events: none;
}

.sl-icon--plus {
  --sl-icon-source: url("../images/catalog-ui/icon-plus.svg");
}

.sl-icon--minus {
  --sl-icon-source: url("../images/catalog-ui/icon-minus.svg");
}

.sl-icon--search {
  --sl-icon-source: url("../images/catalog-ui/icon-search.svg");
}

.sl-icon--close {
  --sl-icon-source: url("../images/catalog-ui/icon-close.svg");
  height: 24px;
  width: 24px;
}

.sl-icon--check {
  --sl-icon-source: url("../images/catalog-ui/icon-check.svg");
  height: 24px;
  width: 24px;
}

.sl-icon--chevron-down {
  --sl-icon-source: url("../images/catalog-ui/icon-chevron-down.svg");
  height: 8px;
  width: 14px;
}

.sl-icon--chevron-right,
.sl-icon--chevron-left {
  --sl-icon-source: url("../images/catalog-ui/icon-chevron-right.svg");
}

.sl-icon--chevron-left {
  transform: rotate(180deg);
}

/* Semantic Accordion: native details/summary with one shared visual state. */
.sl-accordion,
.sl-catalog-faq-item {
  --sl-accordion-question-size: 15px;
  --sl-accordion-question-line-height: 20px;
  --sl-accordion-answer-size: 14px;
  --sl-accordion-answer-line-height: 20px;
  background: var(--sl-color-surface-subtle);
  border: 1px solid var(--sl-color-border-brand-subtle);
  border-radius: var(--sl-radius-card);
  overflow: hidden;
}

:is(.sl-accordion, .sl-catalog-faq-item) > summary {
  align-items: center;
  box-sizing: border-box;
  color: var(--sl-color-text-brand);
  cursor: pointer;
  display: flex;
  font-family: var(--sl-font-body);
  font-size: var(--sl-accordion-question-size);
  font-weight: 700;
  justify-content: space-between;
  line-height: var(--sl-accordion-question-line-height);
  list-style: none;
  min-height: 44px;
  padding: 12px 48px 12px 16px;
  position: relative;
  transition: background-color var(--sl-motion-fast) var(--sl-motion-easing);
}

:is(.sl-accordion, .sl-catalog-faq-item) > summary::marker,
:is(.sl-accordion, .sl-catalog-faq-item) > summary::-webkit-details-marker {
  content: "";
  display: none;
}

:is(.sl-accordion, .sl-catalog-faq-item) > summary::after {
  background-color: currentColor;
  content: "";
  height: 8px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform var(--sl-motion-fast) var(--sl-motion-easing);
  width: 14px;
  -webkit-mask: url("../images/catalog-ui/icon-chevron-down.svg") center / contain no-repeat;
  mask: url("../images/catalog-ui/icon-chevron-down.svg") center / contain no-repeat;
}

:is(.sl-accordion, .sl-catalog-faq-item)[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
}

:is(.sl-accordion, .sl-catalog-faq-item) > summary:hover {
  background: var(--sl-color-surface-default);
}

:is(.sl-accordion, .sl-catalog-faq-item) > summary:focus-visible {
  outline: var(--sl-focus-outline);
  outline-offset: -3px;
}

html body :is(.sl-accordion, .sl-catalog-faq-item) > p {
  color: var(--sl-color-text-secondary);
  font-family: var(--sl-font-body);
  font-size: var(--sl-accordion-answer-size) !important;
  line-height: var(--sl-accordion-answer-line-height) !important;
  margin: 0;
  padding: 0 16px 14px;
}

.sl-catalog-module--faq {
  --sl-accordion-heading-size: 24px;
  --sl-accordion-heading-line-height: 28px;
}

html body .sl-catalog-module--faq > .sl-catalog-module__head h2 {
  font-size: var(--sl-accordion-heading-size) !important;
  line-height: var(--sl-accordion-heading-line-height) !important;
}

@media (max-width: 767px) {
  .sl-accordion,
  .sl-catalog-faq-item {
    --sl-accordion-question-size: 14px;
    --sl-accordion-question-line-height: 20px;
    --sl-accordion-answer-size: 13px;
    --sl-accordion-answer-line-height: 19px;
  }

  .sl-catalog-module--faq {
    --sl-accordion-heading-size: 18px;
    --sl-accordion-heading-line-height: 22px;
  }
}

/* Compact icon remains 18px; negative margins preserve layout while hit area is 44px. */
.sl-icon-button-hit {
  flex: 0 0 44px !important;
  height: 44px !important;
  margin: -13px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  width: 44px !important;
}

/* Unified dialog close control. Component styles retain only positioning. */
:is(
  .sl-privacy-consent__close,
  .sl-add-cart-feedback__close,
  .sl-tire-sku__certificate-close,
  .sl-smart-search__close,
  .sl-tire-compare-dialog__close,
  .sl-availability-sheet__close,
  #modal-ajax .window .close,
  .sl-checkout-modal .mod-close,
  .mod .mod-close,
  [class*="modal"] .mod-close
) {
  align-items: center !important;
  appearance: none !important;
  background: var(--sl-color-surface-subtle) !important;
  border: 0 !important;
  border-radius: var(--sl-radius-control) !important;
  box-shadow: none !important;
  color: var(--sl-color-text-secondary) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 0 !important;
  height: var(--sl-target-min) !important;
  justify-content: center !important;
  line-height: 0 !important;
  min-height: var(--sl-target-min) !important;
  min-width: var(--sl-target-min) !important;
  overflow: hidden !important;
  padding: 0 !important;
  text-decoration: none !important;
  width: var(--sl-target-min) !important;
}

:is(
  .sl-privacy-consent__close,
  .sl-add-cart-feedback__close,
  .sl-tire-sku__certificate-close,
  .sl-smart-search__close,
  .sl-tire-compare-dialog__close,
  .sl-availability-sheet__close,
  #modal-ajax .window .close,
  .sl-checkout-modal .mod-close,
  .mod .mod-close,
  [class*="modal"] .mod-close
) > span {
  display: none !important;
}

:is(
  .sl-privacy-consent__close,
  .sl-add-cart-feedback__close,
  .sl-tire-sku__certificate-close,
  .sl-smart-search__close,
  .sl-tire-compare-dialog__close,
  .sl-availability-sheet__close,
  #modal-ajax .window .close,
  .sl-checkout-modal .mod-close,
  .mod .mod-close,
  [class*="modal"] .mod-close
)::before {
  background: currentColor !important;
  border-radius: 0 !important;
  content: "" !important;
  height: 24px !important;
  left: 50% !important;
  position: absolute !important;
  top: 50% !important;
  width: 24px !important;
  -webkit-mask: url("../images/catalog-ui/icon-close.svg") center / contain no-repeat !important;
  mask: url("../images/catalog-ui/icon-close.svg") center / contain no-repeat !important;
  transform: translate(-50%, -50%) !important;
}

:is(
  .sl-privacy-consent__close,
  .sl-add-cart-feedback__close,
  .sl-tire-sku__certificate-close,
  .sl-smart-search__close,
  .sl-tire-compare-dialog__close,
  .sl-availability-sheet__close,
  #modal-ajax .window .close,
  .sl-checkout-modal .mod-close,
  .mod .mod-close,
  [class*="modal"] .mod-close
)::after {
  content: none !important;
}

:is(
  .sl-privacy-consent__close,
  .sl-add-cart-feedback__close,
  .sl-tire-sku__certificate-close,
  .sl-smart-search__close,
  .sl-tire-compare-dialog__close,
  .sl-availability-sheet__close,
  #modal-ajax .window .close,
  .sl-checkout-modal .mod-close,
  .mod .mod-close,
  [class*="modal"] .mod-close
):hover {
  background: var(--sl-color-surface-brand-soft) !important;
  color: var(--sl-color-text-brand) !important;
}

:is(
  .sl-privacy-consent__close,
  .sl-add-cart-feedback__close,
  .sl-tire-sku__certificate-close,
  .sl-smart-search__close,
  .sl-tire-compare-dialog__close,
  .sl-availability-sheet__close,
  #modal-ajax .window .close,
  .sl-checkout-modal .mod-close,
  .mod .mod-close,
  [class*="modal"] .mod-close
):focus-visible {
  box-shadow: var(--sl-shadow-focus-soft) !important;
  outline: var(--sl-focus-outline) !important;
  outline-offset: 2px !important;
}

.sl-searchable-select__group-label {
  color: var(--sl-color-text-muted);
  font: 600 11px/16px var(--sl-font-control);
  letter-spacing: 0;
  padding: 7px 12px 4px;
  text-transform: uppercase;
}

.sl-searchable-select__group-label--all {
  border-top: 1px solid var(--sl-color-border-default);
  margin-top: 4px;
  padding-top: 9px;
}

.sl-searchable-select__option.is-popular:not(.is-selected) {
  color: var(--sl-color-text-primary) !important;
  font-weight: 600 !important;
}

.sl-searchable-select__option.is-reset {
  border-bottom: 1px solid var(--sl-color-border-default) !important;
  color: var(--sl-color-text-brand) !important;
  font-weight: 600 !important;
}

html body .sl-catalog-system a.sl-catalog-filter-summary__item {
  align-items: center;
  color: var(--sl-color-text-brand);
  text-decoration: none;
}

html body .sl-catalog-system a.sl-catalog-filter-summary__item:hover {
  background: var(--sl-color-surface-page);
  border-color: var(--sl-color-border-brand);
}

html body .sl-catalog-system a.sl-catalog-filter-summary__item:focus-visible {
  box-shadow: var(--sl-shadow-focus-soft);
  outline: var(--sl-focus-outline);
  outline-offset: 2px;
}

.sl-catalog-filter-summary__remove {
  flex: 0 0 14px;
  height: 14px;
  margin-left: 2px;
  position: relative;
  width: 14px;
}

.sl-catalog-filter-summary__remove::before,
.sl-catalog-filter-summary__remove::after {
  background: currentColor;
  border-radius: 2px;
  content: "";
  height: 1.5px;
  left: 2px;
  position: absolute;
  top: 6px;
  width: 10px;
}

.sl-catalog-filter-summary__remove::before {
  transform: rotate(45deg);
}

.sl-catalog-filter-summary__remove::after {
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  html body .sl-catalog-system .sl-catalog-filter-results[data-catalog-count-source="netcat-server-filter"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/*
  Chips are compact data choices, not CTA buttons. This exception deliberately
  outranks the global RoadRadio button contract above.
*/
html body:is(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope)
  :is(button.sl-catalog-chip, a.sl-catalog-chip, .sl-smart-search__chips button, .sl-smart-search__tire-finder-chips button, .sl-mobile-search-entry__chips button) {
  font-family: var(--sl-chip-font-family) !important;
  text-transform: none;
}

/* Personal-data consent is a separate user decision, not submit-button copy. */
.sl-pd-consent {
  color: var(--sl-color-text-secondary);
  font: 400 12px/16px var(--sl-font-body);
  margin: var(--sl-space-3) 0;
}

.sl-pd-consent label {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: var(--sl-space-2);
}

.sl-pd-consent input[type="checkbox"] {
  accent-color: var(--sl-color-action-primary-default);
  align-self: flex-start;
  box-sizing: border-box;
  flex: 0 0 20px;
  height: 20px;
  max-width: 20px;
  margin: 0;
  min-height: 20px;
  min-width: 20px;
  padding: 0;
  width: 20px;
}

.sl-pd-consent a {
  color: var(--sl-color-text-brand);
  font-weight: 400;
  text-decoration: none;
  text-underline-offset: 3px;
}

.sl-pd-consent a:is(:hover, :focus-visible) {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
}

.sl-pd-consent:focus-within {
  border-radius: var(--sl-radius-control);
  box-shadow: var(--sl-shadow-focus-soft);
  outline: 2px solid transparent;
}

.sl-privacy-consent {
  box-sizing: border-box;
  bottom: var(--sl-space-4);
  left: var(--sl-space-4);
  position: fixed;
  right: var(--sl-space-4);
  z-index: 1000001;
}

.sl-privacy-consent__panel {
  align-items: center;
  background: var(--sl-color-surface-default);
  border: 1px solid var(--sl-color-border-brand-subtle);
  border-radius: var(--sl-radius-card);
  box-shadow:
    0 12px 48px rgba(15, 23, 42, .28),
    0 3px 10px rgba(15, 23, 42, .16);
  box-sizing: border-box;
  display: flex;
  gap: var(--sl-space-6);
  margin: 0 auto;
  max-width: 980px;
  padding: var(--sl-space-5);
  position: relative;
  width: 100%;
}

.sl-privacy-consent--compact .sl-privacy-consent__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.sl-privacy-consent--compact .sl-privacy-consent__actions {
  flex: 0 0 auto;
}

.sl-privacy-consent--compact [data-sl-consent-accept] {
  min-width: 120px;
}

.sl-privacy-consent--compact .sl-privacy-consent__copy p {
  margin: 0;
  font: 400 13px/19px var(--sl-font-body);
}

.sl-privacy-consent__panel * {
  box-sizing: border-box;
}

.sl-privacy-consent__close {
  align-items: center;
  appearance: none;
  background: var(--sl-color-surface-brand-soft);
  border: 0;
  border-radius: var(--sl-radius-pill);
  color: var(--sl-color-text-primary);
  cursor: pointer;
  display: flex;
  font: 400 24px/1 var(--sl-font-body);
  height: 44px;
  justify-content: center;
  padding: 0 0 2px;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 44px;
}

.sl-privacy-consent__close:hover {
  background: var(--sl-ref-slate-200);
}

.sl-privacy-consent__close:focus-visible {
  box-shadow: var(--sl-shadow-focus-soft);
  outline: 2px solid var(--sl-color-focus-ring);
  outline-offset: 2px;
}

.sl-privacy-consent__copy h2 {
  padding-right: 48px;
}

.sl-privacy-consent__copy {
  flex: 1 1 auto;
}

.sl-privacy-consent__copy h2 {
  color: var(--sl-color-text-primary);
  font: 700 18px/24px var(--sl-font-display);
  margin: 0 0 var(--sl-space-2);
}

.sl-privacy-consent__copy p {
  color: var(--sl-color-text-secondary);
  font: 400 13px/18px var(--sl-font-body);
  margin: 0;
}

.sl-privacy-consent__copy p + p {
  margin-top: var(--sl-space-2);
}

.sl-privacy-consent__status {
  background: var(--sl-color-surface-brand-soft);
  border-radius: var(--sl-radius-control);
  color: var(--sl-color-text-primary) !important;
  display: inline-block;
  margin-bottom: var(--sl-space-2) !important;
  padding: 5px 8px;
}

.sl-privacy-consent__copy a {
  color: var(--sl-color-text-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sl-privacy-consent__actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--sl-space-2);
}

.sl-privacy-consent__button {
  align-items: flex-start;
  background: var(--sl-color-surface-default);
  border: 1px solid var(--sl-color-border-strong);
  border-radius: var(--sl-radius-control);
  color: var(--sl-color-text-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: 700 13px/18px var(--sl-font-action);
  justify-content: center;
  min-height: var(--sl-control-md);
  padding: 10px var(--sl-space-4);
  position: relative;
  text-align: left;
}

.sl-privacy-consent__button small {
  color: var(--sl-color-text-muted);
  font: 400 11px/15px var(--sl-font-body);
}

.sl-privacy-consent__button:hover {
  background: var(--sl-color-surface-brand-soft);
  border-color: var(--sl-color-border-brand);
}

.sl-privacy-consent__button.is-selected {
  background: var(--sl-color-surface-brand-soft);
  border-color: var(--sl-color-action-primary-default);
  box-shadow: inset 0 0 0 1px var(--sl-color-action-primary-default);
  padding-right: 40px;
}

.sl-privacy-consent__button.is-selected::after {
  align-items: center;
  background: var(--sl-color-action-primary-default);
  border-radius: var(--sl-radius-pill);
  color: var(--sl-color-action-on-primary);
  content: "✓";
  display: flex;
  font: 700 12px/1 var(--sl-font-body);
  height: 22px;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
}

.sl-privacy-consent__button:focus-visible,
.sl-privacy-settings:focus-visible {
  box-shadow: var(--sl-shadow-focus-soft);
  outline: 2px solid var(--sl-color-focus-ring);
  outline-offset: 2px;
}

.sl-privacy-settings {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .sl-privacy-consent {
    bottom: var(--sl-space-2);
    left: var(--sl-space-2);
    right: var(--sl-space-2);
  }

  .sl-privacy-consent__panel,
  .sl-privacy-consent__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sl-privacy-settings {
    align-items: center;
    display: inline-flex;
    min-height: var(--sl-target-min);
  }

  .sl-privacy-consent__panel {
    gap: var(--sl-space-4);
    padding: var(--sl-space-4);
  }

  .sl-privacy-consent.is-initial {
    bottom: 8px;
    left: 8px;
    right: 8px;
  }

  .sl-privacy-consent.is-initial .sl-privacy-consent__panel {
    border-color: var(--sl-color-border-brand);
    border-radius: 16px;
    box-shadow:
      0 12px 48px rgba(15, 23, 42, .28),
      0 3px 10px rgba(15, 23, 42, .16);
    max-height: min(72dvh, 520px);
    max-width: 100%;
    overflow-y: auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    width: 100%;
  }

  .sl-privacy-consent.is-initial .sl-privacy-consent__copy h2 {
    font-size: 20px;
    line-height: 26px;
  }

  .sl-privacy-consent.is-initial .sl-privacy-consent__status {
    margin-bottom: 6px !important;
  }

  .sl-privacy-consent.is-initial .sl-privacy-consent__button {
    min-height: 58px;
    width: 100%;
  }

  .sl-privacy-consent.is-initial [data-sl-consent-accept] {
    background: var(--sl-color-action-primary-default);
    border-color: var(--sl-color-action-primary-default);
    color: var(--sl-color-action-on-primary);
  }

  .sl-privacy-consent.is-initial [data-sl-consent-accept] small {
    color: rgba(255, 255, 255, .82);
  }

  .sl-privacy-consent.is-initial [data-sl-consent-accept]:hover {
    background: var(--sl-color-action-primary-hover);
  }

}

html body:is(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope)
  :is(textarea, input:not([type="button"]):not([type="submit"]):not([type="reset"])) {
  font-family: var(--sl-font-control) !important;
}

:where(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope)
  :where(input, textarea, select)::placeholder {
  color: var(--sl-color-text-placeholder);
  opacity: 1;
}

:where(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope)
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--sl-focus-outline);
  outline-offset: 2px;
}

:where(.sl-site-header, .sl-home-nav, .sl-home-footer)
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--sl-focus-outline-inverse);
}

:where(.sl-site-content, .sl-tire-sku, .sl-checkout, .sl-catalog-system, .sl-service-page)
  :where(p, li, dd) a:not([class]) {
  color: var(--sl-color-text-brand);
  text-decoration: none;
  text-underline-offset: 3px;
}

:where(.sl-site-content, .sl-tire-sku, .sl-checkout, .sl-catalog-system, .sl-service-page)
  :where(p, li, dd) a:not([class]):hover {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
}

.sl-ds-display {
  color: var(--sl-color-text-brand);
  font-family: var(--sl-font-display);
  font-weight: 700;
}

.sl-ds-heading-mobile,
.sl-ds-heading-mobile-accent {
  font-family: var(--sl-font-display);
  font-weight: 700;
  letter-spacing: 0;
}

.sl-ds-heading-mobile {
  font-size: var(--sl-font-size-heading-mobile-standard);
  line-height: var(--sl-line-height-heading-mobile-standard);
}

.sl-ds-heading-mobile-accent {
  font-size: var(--sl-font-size-heading-mobile-accent);
  line-height: var(--sl-line-height-heading-mobile-accent);
}

.sl-ds-inline-link {
  color: var(--sl-color-text-brand);
  text-decoration: none;
  text-underline-offset: 3px;
}

.sl-ds-inline-link:hover {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
}

@media (prefers-reduced-motion: reduce) {
  :where(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope) *,
  :where(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope) *::before,
  :where(.sl-site-page, .sl-home-redesign-page, .sl-ds-scope) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}