/*
 GSP DESIGN SYSTEM — v1 / 2026-10-11
 Single source of truth for the public GSP website.
 Load fonts.css, page layout CSS, then this file. Add class="gsp-design" to body.
 Page CSS owns grids, image proportions and behavior; use these tokens for visual rules.
 Do not add local font sizes/families or !important typography overrides.

 TYPE & LANGUAGE
 US English, concise sentence case, descriptive action labels. Keep GSP/HSF/CARB uppercase.
 One H1 per page; H2 for sections; H3 for cards. Choose headings for meaning, not size.
 32 / 20 / 16 / 14 px at the default browser setting. Body never below 16, helper text 14.
 Normal 400, controls 500, headings/emphasis 600. No condensed face or decorative italics.
 Preserve user zoom. Never shrink required product, fitment or legal information to hide it.

 LAYOUT & COMPONENTS
 Space in the named 4px steps below. Section rhythm: 40 desktop / 32 mobile.
 Maximum content width 1440, reading width 760. Keep related labels and values together.
 Red is for primary actions, active links and important notices; charcoal for secondary controls.
 Buttons: 48px; compact/icon controls: 44px. Text fields: 48px; checkbox/radio: 20px.
 Keyboard focus is visible, errors include text, and selected states are not color-only.
 Product photos/CAD previews keep their proportions. Respect reduced motion.
 Future pages must use this CSS and the shared shell; do not recreate the scale locally.
*/
:root {
  --gsp-font:Barlow,Arial,sans-serif;
  --gsp-text-title:2rem; --gsp-text-heading:1.25rem; --gsp-text-body:1rem; --gsp-text-meta:.875rem;
  --gsp-weight-normal:400; --gsp-weight-control:500; --gsp-weight-emphasis:600;
  --gsp-leading-title:1.2; --gsp-leading-heading:1.3; --gsp-leading-body:1.5; --gsp-leading-reading:1.65;
  --gsp-ink:#171b20; --gsp-muted:#525d66; --gsp-surface:#fff; --gsp-surface-soft:#f4f5f6;
  --gsp-line:#dadddf; --gsp-line-strong:#a9b1b8;
  --gsp-accent:#c8102e; --gsp-accent-hover:#a80d26; --gsp-notice-bg:#f6f3f3;
  --gsp-success:#17613b; --gsp-success-bg:#eef7f1; --gsp-error:#a10d27;
  --gsp-space-4:.25rem; --gsp-space-8:.5rem; --gsp-space-12:.75rem; --gsp-space-16:1rem;
  --gsp-space-20:1.25rem; --gsp-space-24:1.5rem; --gsp-space-32:2rem; --gsp-space-40:2.5rem;
  --gsp-space-48:3rem; --gsp-space-64:4rem; --gsp-space-80:5rem; --gsp-space-96:6rem;
  --gsp-content-width:1440px; --gsp-reading-width:760px; --gsp-gutter:clamp(20px,4.5vw,64px);
  --gsp-section-space:var(--gsp-space-40); --gsp-control-height:3rem; --gsp-compact-height:2.75rem;
  --gsp-radius:0; --gsp-radius-panel:12px; --gsp-radius-pill:999px;
  --gsp-focus:2px solid var(--gsp-ink); --gsp-shadow:0 12px 40px #171b2026;
  --red:var(--gsp-accent); --muted:var(--gsp-muted); --line:var(--gsp-line);
}
.gsp-design {margin:0;background:var(--gsp-surface);color:var(--gsp-ink);font:var(--gsp-weight-normal) var(--gsp-text-body)/var(--gsp-leading-body) var(--gsp-font);font-synthesis:none;text-size-adjust:100%;-webkit-text-size-adjust:100%}
.gsp-design *,.gsp-design *::before,.gsp-design *::after {box-sizing:border-box}
.gsp-design :where(button,input,select,textarea,dialog) {font:inherit}
.gsp-design :where(h1,h2,h3,h4,h5,h6) {font-family:var(--gsp-font);font-weight:var(--gsp-weight-emphasis);letter-spacing:0;line-height:var(--gsp-leading-heading);text-transform:none;text-wrap:pretty}
.gsp-design :where(h1,.gsp-type-title) {font-size:var(--gsp-text-title);line-height:var(--gsp-leading-title);letter-spacing:-.02em}
.gsp-design :where(h2,.gsp-type-heading) {font-size:var(--gsp-text-heading)}
.gsp-design :where(h3,h4,h5,h6,.gsp-type-body) {font-size:var(--gsp-text-body)}
.gsp-design :where(strong,b) {font-weight:var(--gsp-weight-emphasis)}
.gsp-design :where(h1,h2,h3) :where(em,span) {font:inherit;letter-spacing:inherit}
.gsp-design :where(p,li,dd) {line-height:var(--gsp-leading-body)}
.gsp-design :where(em) {font-style:normal}
.gsp-design :where(a) {text-underline-offset:3px}
.gsp-design :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible {outline:var(--gsp-focus);outline-offset:3px}
.gsp-design ::selection {background:var(--gsp-accent);color:var(--gsp-surface)}
.gsp-design :where([hidden]) {display:none!important}
.gsp-design :where(button:disabled) {cursor:not-allowed;opacity:.5}

/* Shared semantic roles, including the existing page components. */
.gsp-design :where(.gsp-type-meta,small,.eyebrow,.gsp-eyebrow,.section-label,.origin-line,.process-type,.process-note,.image-note,.project-meta,.project-number,.project-count,.view-detail,.category-link,.updates-detail figcaption,.facebook-consent-note,.facebook-feed-note,.gsp-post-meta,.gsp-post-original,.gsp-post-count,.legal-date,.legal-footer,.legal-links,.gsp-breadcrumb,.intake-breadcrumb,.intake-small,.intake-dispatch,.intake-use-notice,.intake-photo-caption,.charge-viewer-top,.charge-view-controls button,.intake-finish legend,.intake-accordion summary>span,.intake-detail-grid figcaption,.intake-preorder-vehicle,.intake-lightbox-controls p,.gsp-card-category,.gsp-card-action,.gsp-sold-out,.gsp-fit-note,.gsp-availability,.gsp-results-line,.gsp-compact-heading>p,.gsp-cart-variant,.gsp-cart-bottom>p,.gsp-checkout-note,.gsp-remove-line,.gsp-continue,.gsp-contact-required,.gsp-contact-tip,.gsp-contact-helper,.gsp-contact-privacy,.gsp-contact-status) {font-size:var(--gsp-text-meta);line-height:var(--gsp-leading-body)}
.gsp-design :where(.eyebrow,.gsp-eyebrow,.section-label,.process-type,.origin-line,.gsp-card-category) {font-weight:var(--gsp-weight-control);letter-spacing:.03em;color:var(--gsp-muted)}
.gsp-design :where(.intake-feature-grid h2,.gsp-card-copy h3,.gsp-description-title,.gsp-cart-product-name) {font-size:var(--gsp-text-body);line-height:1.4;font-weight:var(--gsp-weight-emphasis)}
.gsp-design :where(.gsp-product-title,.gsp-empty-title,.gsp-detail-price,.intake-total strong,.gsp-cart-total,.socials strong,.gsp-post-title,.review-grid blockquote) {font-size:var(--gsp-text-heading);line-height:var(--gsp-leading-heading);font-weight:var(--gsp-weight-emphasis)}
.gsp-design :where(.gsp-card-price,.gsp-cart-line-price,.intake-total small,.intake-scope,.intake-compatibility,.intake-lead,.gsp-contact-copy>p,.gsp-product-description,.gsp-faq-intro) {font-size:var(--gsp-text-body)}
.gsp-design :where(.intake-total strong,.gsp-card-price,.gsp-detail-price,.gsp-cart-total) {font-variant-numeric:tabular-nums}
.gsp-design :where(.intake-total small,.review-grid blockquote) {font-weight:var(--gsp-weight-normal)}
.gsp-design :where(.gsp-post-text,.gsp-post-meta,.gsp-post-count) {letter-spacing:0}
.gsp-design :where(.gsp-post-title) {min-height:2.6em}
.gsp-design :where(.intake-accordion>summary,.intake-finish legend,.gsp-filters label,.gsp-option,.gsp-quantity,.gsp-item-note) {font-weight:var(--gsp-weight-control)}
.gsp-design :where(.intake-accordion>summary) {font-weight:var(--gsp-weight-emphasis)}
.gsp-design :where(.intake-accordion>summary>span,.gsp-footer strong) {font-weight:var(--gsp-weight-normal)}
.gsp-design :where(.intake-kit-table) {font-size:var(--gsp-text-meta)}
.gsp-design :where(.intake-kit-table small) {font-size:inherit}
.gsp-design :where(.intake-kit-table th) {font-weight:var(--gsp-weight-control)}
.gsp-design :where(.intake-kit-table thead th) {font-weight:var(--gsp-weight-emphasis)}
.gsp-design :where(.intake-detail-grid figcaption strong) {font-weight:var(--gsp-weight-normal)}
.gsp-design :where(.intake-text-link,.gsp-cart-toggle,.gsp-category-tabs button,.gsp-vehicle-buttons button,.updates-facebook-link,.gallery-end a,.voices-heading a) {font-weight:var(--gsp-weight-control)}
.gsp-design :where(.gsp-header nav,header>nav,.legal-header>a:last-child,.gsp-cart-toggle) {font-size:var(--gsp-text-meta);line-height:var(--gsp-leading-body)}
.gsp-design :where(.gsp-footer,footer p,footer>div>span,footer nav,.back-top,.gallery-end p,.review-grid figcaption) {font-size:var(--gsp-text-meta);line-height:var(--gsp-leading-body);letter-spacing:0}
.gsp-design :where(.gsp-cart-count) {font-size:var(--gsp-text-meta);line-height:1;min-width:24px;height:24px}
.gsp-design :where(.facebook-letter) {font:var(--gsp-weight-emphasis) var(--gsp-text-title)/1 var(--gsp-font)}

/* Shared components: use these classes on new pages. Existing classes are adapters. */
.gsp-design :where(.gsp-button,.gsp-btn,.shop-button,#load-facebook) {display:inline-flex;align-items:center;justify-content:center;gap:var(--gsp-space-24);min-height:var(--gsp-control-height);padding:var(--gsp-space-12) var(--gsp-space-20);border:1px solid var(--gsp-accent);border-radius:var(--gsp-radius);font:var(--gsp-weight-control) var(--gsp-text-body)/var(--gsp-leading-body) var(--gsp-font);background:var(--gsp-accent);color:var(--gsp-surface);text-align:center;text-decoration:none;cursor:pointer}
.gsp-design :where(.gsp-button,.gsp-btn,.shop-button,#load-facebook):hover {background:var(--gsp-accent-hover);border-color:var(--gsp-accent-hover)}
.gsp-design :where(.gsp-button-outline,.gsp-btn-secondary) {background:transparent;color:var(--gsp-ink);border-color:var(--gsp-ink)}
.gsp-design :where(.gsp-button-outline,.gsp-btn-secondary):hover {background:var(--gsp-ink);color:var(--gsp-surface);border-color:var(--gsp-ink)}
.gsp-design :where(.gsp-button,.shop-button)>span {font:inherit}
.gsp-design :where(.gsp-field,form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),form select,form textarea,.gsp-filters input,.gsp-filters select,.gsp-option select,.gsp-quantity input,.gsp-item-note input) {min-width:0;min-height:var(--gsp-control-height);border:1px solid var(--gsp-line-strong);border-radius:var(--gsp-radius);padding:var(--gsp-space-12);background:var(--gsp-surface);color:var(--gsp-ink);font:var(--gsp-weight-normal) var(--gsp-text-body)/var(--gsp-leading-body) var(--gsp-font)}
.gsp-design :where(form label) {font-size:var(--gsp-text-body);font-weight:var(--gsp-weight-control)}
.gsp-design :where(input[type=checkbox],input[type=radio]) {accent-color:var(--gsp-accent)}
.gsp-design :where(.gsp-quantity-button,.gsp-close,.project-close,.project-controls button,.intake-preorder-close,.intake-lightbox-close,.intake-lightbox-controls button,.gsp-post-arrow) {min-width:var(--gsp-compact-height);min-height:var(--gsp-compact-height);font-size:var(--gsp-text-heading);line-height:1}
.gsp-design :where(.gsp-vehicle-buttons button,.gsp-category-label,.charge-view-controls button) {min-height:var(--gsp-compact-height)}
.gsp-design :where(.intake-accordion>summary::after) {font-size:var(--gsp-text-heading);line-height:1}
.gsp-design :where(.gsp-notice) {border-left:2px solid var(--gsp-accent);padding:var(--gsp-space-12) var(--gsp-space-16);background:var(--gsp-notice-bg)}
.gsp-design :where(.gsp-card) {border:1px solid var(--gsp-line);padding:var(--gsp-space-24);background:var(--gsp-surface)}
.gsp-design :where(.gsp-stack)>*+* {margin-top:var(--gsp-space-16)}
.gsp-design :where(.gsp-container) {max-width:var(--gsp-content-width);margin-inline:auto;padding-inline:var(--gsp-gutter)}
.gsp-design :where(.gsp-reading) {max-width:var(--gsp-reading-width);line-height:var(--gsp-leading-reading)}

/* Consistent page and section rhythm. Geometry stays with each layout. */
.gsp-design :is(.intake-container,.gsp-catalog,.gsp-detail-page,.gsp-contact-main,.gsp-shop-intro) {max-width:var(--gsp-content-width);padding-inline:var(--gsp-gutter)}
.gsp-design :is(.gsp-catalog,.gsp-detail-page,.gsp-contact-main,.gsp-faq,.legal-main) {padding-top:var(--gsp-section-space);padding-bottom:var(--gsp-section-space)}
.gsp-design :is(.legal-main,.legal-footer,.gsp-faq) {max-width:var(--gsp-reading-width);padding-inline:var(--gsp-space-24)}
.gsp-design :is(.legal-main p,.legal-main li,.gsp-faq p,.gsp-product-description) {line-height:var(--gsp-leading-reading)}
.gsp-design :is(.legal-main h1,.gsp-faq h1,.gsp-contact-copy h1) {margin:0 0 var(--gsp-space-20)}
.gsp-design :is(.legal-main h2,.gsp-detail-copy h2) {margin:var(--gsp-space-32) 0 var(--gsp-space-12)}
.gsp-design :is(.legal-main p) {margin:var(--gsp-space-12) 0}
.gsp-design :is(.gsp-detail-copy h1) {margin:var(--gsp-space-8) 0 var(--gsp-space-20)}
.gsp-design :is(.gsp-detail-layout) {gap:var(--gsp-space-32)}
.gsp-design :is(.gsp-contact-main) {gap:var(--gsp-space-48)}
.gsp-design :is(.gsp-contact-copy>p) {max-width:32rem}
.gsp-design :is(.gsp-contact-form-section h2) {margin:0 0 var(--gsp-space-12)}
.gsp-design :is(.philosophy,.facebook-updates,.craft,.product-story,.work-gallery,.owner-voices,.gsp-home-help,.gsp-shop-help) {padding-block:var(--gsp-section-space)}
.gsp-design :is(.philosophy,.facebook-updates,.craft,.product-story,.work-gallery,.owner-voices,.connect,.gsp-home-help,.gsp-shop-help) {padding-inline:max(var(--gsp-gutter),calc((100% - var(--gsp-content-width))/2 + var(--gsp-gutter)))}
.gsp-design :is(.philosophy-grid,.updates-grid,.product-grid) {margin-top:var(--gsp-space-24);column-gap:var(--gsp-space-40)}
.gsp-design :is(.craft-heading,.gallery-heading,.voices-heading,.connect-heading) {margin:var(--gsp-space-24) 0;gap:var(--gsp-space-24)}
.gsp-design :is(.process-cards,.project-mosaic,.review-grid) {gap:var(--gsp-space-24)}
.gsp-design :is(.hero h1) {margin-top:var(--gsp-space-16)}
.gsp-design :is(.hero-intro) {margin-top:var(--gsp-space-16)}
.gsp-design :is(.gsp-card-copy h3) {min-height:4.2em;margin:var(--gsp-space-8) 0 var(--gsp-space-12)}
.gsp-design :is(.gsp-card-bottom) {gap:var(--gsp-space-8);flex-wrap:wrap}
.gsp-design :is(.gsp-header,header.scrolled,.legal-header) {min-height:76px;padding-inline:var(--gsp-gutter)}
.gsp-design :is(.gsp-header nav) {gap:var(--gsp-space-24)}
.gsp-design :is(.gsp-footer) {padding:var(--gsp-space-32) var(--gsp-gutter);gap:var(--gsp-space-24)}
.gsp-design :is(.gsp-footer nav) {gap:var(--gsp-space-8)}
.gsp-design :is(.gsp-footer strong,.gsp-footer p,.gsp-footer nav) {font-size:var(--gsp-text-meta);line-height:var(--gsp-leading-body);letter-spacing:0}
.gsp-design #your-cart .gsp-catalog>*+* {margin-top:var(--gsp-space-16)}
.gsp-design .charge-view-surface:focus-visible {outline:var(--gsp-focus);outline-offset:-3px}
.gsp-design .intake-finish-options input:focus-visible+.intake-finish-chip {outline:var(--gsp-focus);outline-offset:3px}

/* Chat is part of the same system; the pill and panel are purposeful shape exceptions. */
.gsp-design #gsp-chat {font:var(--gsp-weight-normal) var(--gsp-text-body)/var(--gsp-leading-body) var(--gsp-font);--chat-accent:var(--gsp-accent)}
.gsp-design #gsp-chat .gsp-chat-message {font-size:var(--gsp-text-body);line-height:var(--gsp-leading-body)}
.gsp-design #gsp-chat :is(.gsp-chat-actions,.gsp-chat-status,.gsp-chat-reset,.gsp-chat-suggestions button) {font-size:var(--gsp-text-meta)}
.gsp-design #gsp-chat .gsp-chat-launch {font-weight:var(--gsp-weight-emphasis);border-radius:var(--gsp-radius-pill)}
.gsp-design #gsp-chat .gsp-chat-panel {border-radius:var(--gsp-radius-panel);box-shadow:var(--gsp-shadow)}
.gsp-design #gsp-chat :is(.gsp-chat-close,.gsp-chat-form button) {font-size:var(--gsp-text-heading);min-width:var(--gsp-compact-height);min-height:var(--gsp-compact-height)}
.gsp-design #gsp-chat .gsp-chat-form textarea {min-height:44px;padding:var(--gsp-space-8);border:0;line-height:var(--gsp-leading-body)}
.gsp-design #gsp-chat .gsp-chat-suggestions button {min-height:var(--gsp-compact-height);border-radius:var(--gsp-radius-panel)}
.gsp-design #gsp-chat :is(button,a,textarea):focus-visible {outline:2px solid var(--gsp-accent);outline-offset:3px}
@media(max-width:850px) {
  :root {--gsp-gutter:var(--gsp-space-20);--gsp-section-space:var(--gsp-space-32)}
  .gsp-design :is(.gsp-header,header.scrolled,.legal-header) {min-height:68px}
  .gsp-design :is(.gsp-header nav) {gap:var(--gsp-space-12)}
  .gsp-design :is(.gsp-contact-main) {gap:var(--gsp-space-32)}
  .gsp-design :is(.legal-main,.legal-footer,.gsp-faq) {padding-inline:var(--gsp-gutter)}
}
@media(prefers-reduced-motion:reduce) {
  .gsp-design,.gsp-design * {scroll-behavior:auto!important}
  .gsp-design *,.gsp-design *::before,.gsp-design *::after {animation:none!important;transition:none!important}
}