/* One restrained heading scale for all storefront pages. Product-card titles are intentionally excluded. */
:root {
  /* Canonical storefront typography tokens. Keep page CSS from inventing
       another blue, font or label scale. */
  --site-font:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --site-accent: #2864e8;
  /* One desktop H1 size across product, vehicle, account and content pages. */
  --type-page-title: 30px;
  --type-section-title: clamp(23px, 1.7vw, 27px);
  --type-subheading: 18px;
  --type-body: 15px;
  --type-body-large: 16px;
  --type-control: 14px;
  --type-meta: 13px;
  --type-caption: 12px;
  --type-micro: 11px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.2;
  --leading-heading: 1.25;
  --leading-body: 1.6;
  --site-label-size: 12px;
  --site-label-weight: 700;
  --site-label-line: 1.4;
  --site-label-spacing: 0.04em;
  --site-h1: var(--type-page-title);
  --site-h2: var(--type-section-title);
  --site-h3: var(--type-subheading);
  /* Shared readable scale for informational and service pages. */
  --site-copy: var(--type-body);
  --site-card-copy: var(--type-control);
  --site-card-title: var(--type-body);
  --site-caption: var(--type-caption);
  --site-copy-line: 1.65;
}

main,
main button,
main input,
main select,
main textarea {
  font-family: var(--site-font);
}

/* One blue label role across every Symfony storefront template. This is the
   same role used by CUSTOMER ACCOUNT on the account page. Newsletter labels
   are intentionally excluded because they sit on a solid blue background. */
main
  :is(
    .eyebrow,
    .kicker,
    .hero-kicker,
    .site-kicker,
    .hero-eyebrow,
    .help-block-eyebrow,
    .catalog-kicker,
    .catalog-section-kicker,
    .category-kicker,
    .category-page-kicker,
    .account-kicker,
    .about-kicker,
    .about-section-kicker,
    .brands-kicker,
    .cm-kicker,
    .cmo-eyebrow,
    .confirmation-kicker,
    .checkout-card-kicker,
    .checkout-header > div:first-child > span,
    .checkout-summary-head > span,
    .contact-kicker,
    .error-kicker,
    .fluids-kicker,
    .garage-eyebrow,
    .hub-kicker,
    .not-found-kicker,
    .shipping-kicker,
    .shipping-section-kicker,
    .sr-eyebrow,
    .track-hero-copy > span,
    .vc-empty-kicker,
    .vct-kicker,
    .vmp-kicker,
    .vmp-section-kicker
  ) {
  color: var(--site-accent) !important;
  font-family: var(--site-font) !important;
  font-size: var(--site-label-size) !important;
  font-weight: var(--site-label-weight) !important;
  line-height: var(--site-label-line) !important;
  letter-spacing: var(--site-label-spacing) !important;
  text-transform: uppercase !important;
}

/* Every page title starts from the same role. Narrow vehicle/product cases
   below may only reduce it when the content is unusually long. */
main h1 {
  font-family: var(--site-font) !important;
  font-size: var(--site-h1) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.025em !important;
}

/* Labels expressed as child spans on older templates. */
main
  :is(
    .account-section-title > div,
    .account-panel-head > div,
    .brands-section-head > div,
    .garage-section-head > div,
    .cm-section-head > div,
    .cmo-section-head > div,
    .vmp-section-head > div
  )
  > span {
  color: var(--site-accent) !important;
  font-family: var(--site-font) !important;
  font-size: var(--site-label-size) !important;
  font-weight: var(--site-label-weight) !important;
  line-height: var(--site-label-line) !important;
  letter-spacing: var(--site-label-spacing) !important;
  text-transform: uppercase !important;
}

/* Product pages use the same calm scale as catalogue and vehicle pages. */
main .tdp-titlebar h1 {
  max-width: 1050px;
  font-size: var(--site-h1) !important;
  font-weight: var(--weight-bold) !important;
  line-height: 1.16 !important;
}

main .tdp-titlebar h1 span {
  white-space: normal;
}

main .tdp-breadcrumb,
main .tdp-title-brand,
main .tdp-identifiers {
  font-size: 14px;
}

main .tdp-description-facts div,
main .tdp-specifications dt,
main .tdp-specifications dd,
main .tdp-panel-head p,
main .tdp-copy p {
  font-size: 15px;
}

main .tdp-key-specs div {
  font-size: 13px;
}

/* Similar-product cards must remain readable at the shared catalogue scale. */
main .tdp-similar-grid > a > strong {
  font-size: var(--site-card-title) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

main .tdp-similar-grid > a > span {
  font-size: var(--type-meta) !important;
  line-height: 1.45 !important;
}

main .tdp-similar-grid > a > em {
  font-size: var(--type-body-large) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

main .tdp-faq-list summary {
  padding: 19px 0;
  color: #263449;
  font-size: 17px;
  line-height: 1.4;
}

main .tdp-faq-list p {
  max-width: 1100px;
  margin: -3px 42px 20px 0;
  color: #4f5f75;
  font-size: 16px;
  line-height: 1.7;
}

main .tdp-faq > div:first-child p {
  color: #526178;
  font-size: 15px;
}

main
  :is(
    .hero,
    .account-hero,
    .about-hero,
    .shipping-hero,
    .faq-hero,
    .hub-hero,
    .garage-hero,
    .confirmation-hero,
    .not-found-hero,
    .error-hero,
    .fluids-hero,
    .catalog-hero,
    .category-hero,
    .brands-hero,
    .cm-hero,
    .cmo-hero,
    .vmp-hero,
    .vct-vehicle,
    .sr-header,
    .tdp-titlebar,
    .contact-hero
  )
  h1,
main h1.page-h1,
main h1.gen-h1 {
  font-size: var(--site-h1) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.025em !important;
}

/* Vehicle names can be very long, but they still use the same page-title
   role as product, content and account pages. Wrapping controls the height
   without introducing a second font scale. */
main .vct-vehicle h1,
main .sr-vehicle-header h1 {
  max-width: 980px;
  font-size: var(--site-h1) !important;
  font-weight: var(--weight-bold) !important;
  line-height: 1.16 !important;
  overflow-wrap: anywhere;
}

main .sr-vehicle-empty h2 {
  font-size: clamp(24px, 1.65vw, 28px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

main
  :is(
    .section-head,
    .catalog-section-heading,
    .catalog-guide,
    .catalog-faq,
    .category-section-head,
    .category-endpoint,
    .category-guide,
    .category-help-card,
    .brands-seo-copy,
    .brands-section-head,
    .cm-seo-copy,
    .cm-section-head,
    .cmo-section-head,
    .cmo-seo,
    .vmp-intro,
    .vmp-section-head,
    .vmp-model-guide-head,
    .vmp-seo,
    .vehicle-editorial,
    .vehicle-faq,
    .tdp-panel,
    .tdp-faq,
    .seo-section,
    .faq-section,
    .category-faq
  )
  h2,
main h2.select-h2 {
  font-size: var(--site-h2) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.018em !important;
}

/* Homepage editorial heading is outside the reusable section-head wrapper. */
main .home-page > :is(section, div) > h2,
main .home-page .seo-block h2 {
  font-size: var(--site-h2) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.018em !important;
}

main :is(.seo-block, .vehicle-history) h3 {
  font-size: var(--site-h3) !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

/* Calm, readable copy shared by the large editorial and catalogue blocks. */
main
  :is(
    .hero-copy,
    .catalog-hero-copy,
    .category-hero-copy,
    .brands-hero-copy,
    .cm-hero-copy,
    .cmo-hero-copy,
    .vmp-hero-copy,
    .vmp-intro,
    .vehicle-editorial,
    .vehicle-history,
    .vehicle-faq,
    .catalog-guide,
    .catalog-faq,
    .category-guide,
    .category-faq,
    .brands-seo-copy,
    .cm-seo-copy,
    .cmo-seo,
    .vmp-seo,
    .seo-section,
    .faq-section
  )
  p {
  color: #526178;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

main :is(.breadcrumb, .breadcrumbs, .tdp-breadcrumb, .sr-breadcrumb) {
  font-size: 14px !important;
  font-weight: 450 !important;
  line-height: 1.45 !important;
}

main
  :is(
    .eyebrow,
    .kicker,
    .hero-kicker,
    .catalog-kicker,
    .category-kicker,
    .vct-kicker
  ) {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* Prices are prominent purchase information, not page headlines. */
main .sr-price,
main .tdp-buy > strong {
  color: #172033;
  font-size: clamp(25px, 1.55vw, 28px) !important;
  font-weight: 650 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
}

main .sr-price-label,
main .tdp-buy > small {
  color: #64748b;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

main .price-eur-secondary {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

main .tdp-warehouse-option > b .price-eur-secondary {
  text-align: right;
}

/* Engine list labels must remain visible without competing with their values. */
main .vmp-engine-main small,
main .vmp-engine-spec small {
  color: #66758a;
  font-size: var(--site-card-copy) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

main .vmp-engine-main strong,
main .vmp-engine-spec strong {
  color: #334155;
  font-size: var(--site-card-title) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

main .vmp-engine-main strong {
  font-weight: 600 !important;
}

main .vmp-engine-go {
  font-size: 14px !important;
  font-weight: 500 !important;
}

main .vmp-fuel-head h3 {
  font-size: var(--site-card-title) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

main .vmp-fuel-head small {
  font-size: var(--site-card-copy) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

main .vmp-intro > p {
  font-size: var(--site-copy) !important;
  font-weight: 400 !important;
  line-height: var(--site-copy-line) !important;
  text-align: left !important;
}

/* Model SEO facts use the same readable scale as the vehicle-version list. */
main .vmp-model-facts dt {
  color: #66758a;
  font-size: var(--site-card-copy) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

main .vmp-model-facts dd {
  color: #334155;
  font-size: var(--site-card-title) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

main .vmp-hero-copy > p,
main .vmp-model-guide-head p,
main .vmp-model-note {
  font-size: var(--site-copy) !important;
  font-weight: 400 !important;
  line-height: var(--site-copy-line) !important;
}

main .vmp-intro h2,
main .vmp-model-guide-head h2 {
  font-size: var(--site-h2) !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}

/* Exact-vehicle catalogue uses the same text roles as model and About pages. */
main .vct-heading h2,
main .vct-vehicle-guide-copy h2 {
  font-size: var(--site-h2) !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}

main .vct-heading p,
main .vct-vehicle-guide-copy p {
  color: #526178;
  font-size: var(--site-copy) !important;
  font-weight: 400 !important;
  line-height: var(--site-copy-line) !important;
}

main .vct-specs small,
main .vct-vehicle-guide-facts dt {
  color: #66758a;
  font-size: var(--site-card-copy) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

main .vct-specs strong,
main .vct-vehicle-guide-facts dd {
  color: #334155;
  font-size: var(--site-card-title) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

main .vct-category-nav-title span {
  color: #66758a;
  font-size: var(--site-card-copy) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

main .vct-tile-copy small,
main .vct-branch-head small,
main .vct-panel-head p {
  color: #66758a;
  font-size: var(--site-card-copy) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

/* Canonical storefront type roles. This file is loaded after every page
   stylesheet, so legacy modules cannot invent a separate readable scale. */
body,
button,
input,
select,
textarea {
  font-family: var(--site-font) !important;
}

main h1 {
  font-size: var(--site-h1) !important;
  font-weight: var(--weight-bold) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.025em !important;
}

main :is(button, input, select, textarea) {
  font-size: var(--type-control) !important;
  line-height: 1.45 !important;
}

/* Compact content cards use the card roles, not the section-heading role. */
main
  :is(.shipping-options, .payment-method-card-grid, .shipping-receive-grid)
  :is(h2, h3) {
  font-size: var(--site-card-title) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

main
  :is(.shipping-options, .payment-method-card-grid, .shipping-receive-grid)
  p {
  font-size: var(--site-card-copy) !important;
  font-weight: var(--weight-regular) !important;
  line-height: 1.55 !important;
}

/* Reusable homepage/finder sections share one section-title size. */
main :is(.wide-vehicle-heading, .home-autohub-head, .seo-block-head) h2 {
  font-size: var(--site-h2) !important;
  font-weight: var(--weight-bold) !important;
  line-height: var(--leading-heading) !important;
  letter-spacing: -0.018em !important;
}

main .vin-assistance-copy h2 {
  font-size: var(--type-subheading) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1.35 !important;
}

/* Product and saved-vehicle names are card titles, never section headings. */
main .sr-product .sr-info h2 {
  font-size: var(--site-card-title) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

main .garage-car-main h3 {
  font-size: var(--type-subheading) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1.35 !important;
}

/* Shared navigation chrome follows the same readable control scale. */
.site-header :is(a, button, input),
.header :is(a, button, input),
.site-footer :is(a, button, input) {
  font-family: var(--site-font) !important;
}

.site-footer p {
  font-size: var(--type-meta) !important;
  line-height: 1.55 !important;
}

.site-footer small {
  font-size: var(--type-caption) !important;
  line-height: 1.45 !important;
}

.newsletter-eyebrow {
  font-size: var(--type-caption) !important;
  line-height: 1.4 !important;
}

main .cart-list-head span {
  font-size: var(--type-caption) !important;
  font-weight: var(--weight-bold) !important;
  line-height: 1.4 !important;
}

main .tdp-warehouse-head > span,
main .tdp-payments b,
main .tdp-carriers b {
  font-size: var(--type-micro) !important;
  line-height: 1.35 !important;
}

@media (max-width: 760px) {
  :root {
    --site-h1: 26px;
    --site-h2: clamp(21px, 6vw, 25px);
    --site-h3: 17px;
  }

  main .vct-vehicle h1,
  main .sr-vehicle-header h1 {
    font-size: var(--site-h1) !important;
  }

  main .tdp-titlebar h1 {
    font-size: var(--site-h1) !important;
  }

  main .sr-price,
  main .tdp-buy > strong {
    font-size: 25px !important;
  }

  main .tdp-faq-list summary {
    font-size: 16px;
  }
}

@media (max-width: 390px) {
  :root {
    --site-h1: 24px;
    --site-h2: 21px;
  }
}

/*
 * iOS Safari zooms the viewport when a focused text control renders below
 * 16px. Keep every storefront editor at the native no-zoom threshold on
 * phones, including controls created by searchable select components.
 */
@media (max-width: 900px) {
  input,
  select,
  textarea,
  [contenteditable="true"],
  .select2-search__field,
  .choices__input,
  .country-picker-search input {
    font-size: 16px !important;
  }
}

/* Validation messages use one danger colour on every storefront form. */
main .checkout-field-error,
main .invalid-feedback,
main .form-error-message,
main .field-error,
main .parsley-errors-list,
main [data-validation-error] {
  color: #b33939 !important;
}

/*
 * Shared sticky geometry. Page styles used several hard-coded top values,
 * which made panels jump underneath the unified header and active-car bar.
 */
@media (min-width: 901px) {
  .account-nav,
  .cart-summary,
  .checkout-error-banner,
  .checkout-summary,
  .category-search-filters,
  .faq-nav,
  .hub-article-layout aside,
  .shipping-nav,
  .toc,
  .vs-sidebar,
  .buy-box-sticky,
  .sr-sidebar,
  .sr-filters,
  .brands-alphabet,
  .cm-alphabet {
    top: var(--store-sticky-offset) !important;
  }
  .checkout-summary {
    max-height: calc(100vh - var(--store-sticky-offset) - 12px);
  }
}