/** Shopify CDN: Minification failed

Line 1618:0 Unexpected "{"
Line 1618:1 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.error-404 {
    max-width: 32rem;
    margin: 0 auto;
    padding: 5rem 0;
    text-align: center;
  }
  .error-404__title {
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .error-404__text {
    margin-top: 1rem;
    color: var(--color-muted);
  }
  .error-404__link {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.9rem 2rem;
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.9rem;
    border-radius: var(--style-border-radius-inputs);
    transition: filter 0.15s ease;
  }
  .error-404__link:hover {
    filter: brightness(1.1);
  }
/* END_SECTION:404 */

/* START_SECTION:cart (INDEX:3) */
.cart__title {
    padding: 2.5rem 0 1.5rem;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }

  .cart__empty {
    padding: 2rem 0 4rem;
  }
  .cart__continue {
    display: inline-block;
    margin-top: 1rem;
    color: var(--color-accent);
    text-decoration: none;
  }
  .cart__continue:hover {
    text-decoration: underline;
  }

  .cart {
    display: grid;
    grid-template-columns: 1fr 20rem;
    gap: 3rem;
    padding-bottom: 4rem;
    align-items: start;
  }

  .cart__items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .cart__item {
    display: grid;
    grid-template-columns: 5rem 1fr auto auto;
    gap: 1.25rem;
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
  }
  .cart__item-image {
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-secondary-background);
  }
  .cart__item-title {
    display: block;
    color: var(--color-foreground);
    text-decoration: none;
    font-size: 1rem;
  }
  .cart__item-title:hover {
    color: var(--color-accent);
  }
  .cart__item-variant {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--color-muted);
  }
  .cart__item-price {
    margin-top: 0.35rem;
    font-size: 0.9rem;
  }
  .cart__item-remove {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-accent);
    text-decoration: none;
  }
  .cart__item-remove:hover {
    text-decoration: underline;
  }
  .cart__item-quantity {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .cart__item-quantity label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-muted);
  }
  .cart__item-quantity input {
    width: 4.5rem;
    padding: 0.5rem;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-background);
    color: var(--color-foreground);
  }
  .cart__item-total {
    font-weight: bold;
    white-space: nowrap;
  }

  .cart__summary {
    position: sticky;
    top: 6rem;
    padding: 1.5rem;
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-secondary-background);
  }
  .cart__subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: bold;
  }
  .cart__note {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-muted);
  }
  .cart__update,
  .cart__checkout {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 0.9rem;
    border: none;
    border-radius: var(--style-border-radius-inputs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .cart__update {
    background: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid rgb(255 255 255 / 20%);
  }
  .cart__checkout {
    background: var(--color-accent);
    color: #fff;
    transition: background-color 0.15s ease;
  }
  .cart__checkout:hover {
    background: var(--color-accent-bright);
  }

  @media screen and (max-width: 50rem) {
    .cart {
      grid-template-columns: 1fr;
    }
    .cart__item {
      grid-template-columns: 4rem 1fr;
      grid-template-areas:
        'image details'
        'image quantity'
        'image total';
    }
    .cart__item-image {
      grid-area: image;
    }
    .cart__item-details {
      grid-area: details;
    }
    .cart__item-quantity {
      grid-area: quantity;
    }
    .cart__item-total {
      grid-area: total;
    }
  }
/* END_SECTION:cart */

/* START_SECTION:category-tiles (INDEX:4) */
.category-tiles {
    padding: 3.5rem 0;
  }

  .category-tiles__heading {
    font-size: 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-align: center;
    margin-bottom: 2rem;
  }

  .category-tiles__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }

  .category-tiles__item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
    overflow: hidden;
    background: var(--color-secondary-background);
    transition: transform 0.15s ease;
  }
  .category-tiles__item:hover {
    transform: translateY(-2px);
  }

  .category-tiles__media {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-header-background);
    overflow: hidden;
  }
  .category-tiles__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .category-tiles__icon {
    font-size: 2.5rem;
  }

  .category-tiles__label {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-top: 3px solid var(--color-accent);
  }
/* END_SECTION:category-tiles */

/* START_SECTION:collection (INDEX:5) */
.collection-header {
    padding: 2.5rem 0 2rem;
  }
  .collection-header h1 {
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .collection-header__description {
    margin-top: 0.75rem;
    max-width: 60ch;
    line-height: 1.5;
    color: var(--color-muted);
  }

  .collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.75rem;
    padding-bottom: 3rem;
  }

  .pagination {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding-bottom: 3rem;
    font-size: 0.9rem;
  }
  .pagination a {
    color: var(--color-foreground);
    text-decoration: none;
  }
  .pagination a:hover {
    color: var(--color-accent);
  }
  .pagination .page.current {
    color: var(--color-accent);
    font-weight: bold;
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:6) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:cta-band (INDEX:7) */
.cta-band {
    background: var(--color-accent);
    color: #fff;
  }
  .cta-band__inner {
    max-width: 36rem;
    margin: 0 auto;
    padding: 3.5rem var(--page-margin);
    text-align: center;
  }
  .cta-band__heading {
    font-size: 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .cta-band__text {
    margin-top: 0.9rem;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.9;
  }
  .cta-band__button {
    display: inline-block;
    margin-top: 1.75rem;
    padding: 0.9rem 2rem;
    background: #fff;
    color: var(--color-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: var(--style-border-radius-inputs);
    transition: filter 0.15s ease;
  }
  .cta-band__button:hover {
    filter: brightness(0.95);
  }
/* END_SECTION:cta-band */

/* START_SECTION:featured-collection (INDEX:8) */
.featured-collection {
    padding: 3rem 0;
  }

  .featured-collection__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
  }
  .featured-collection__header h2 {
    font-size: 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .featured-collection__view-all {
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .featured-collection__view-all:hover {
    text-decoration: underline;
  }

    .featured-collection__grid {
        display: flex;
      flex-wrap: wrap;
        gap: 1.75rem;
        }

        .featured-collection__grid > * {
            flex: 1 1 220px;
          }
/* END_SECTION:featured-collection */

/* START_SECTION:footer (INDEX:9) */
footer {
    margin-top: 4rem;
    /* Deliberately darker than the header's Nardo grey: the de-emphasized text below
       (tagline, hours, disclaimer) needs more headroom than a mid-tone grey allows for
       readable contrast at reduced opacity. */
    background: #2A2B2C;
    color: var(--color-header-foreground);
  }
  footer .footer__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 3rem var(--page-margin) 1.5rem;
  }
  footer a {
    text-decoration: none;
    color: var(--color-header-foreground);
  }
  footer .footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: space-between;
    padding-bottom: 2rem;
  }
  footer .footer__brand {
    max-width: 24rem;
  }
  footer .footer__brand-name {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  footer .footer__tagline {
    opacity: 0.75;
    font-size: 0.9rem;
    line-height: 1.5;
  }
  footer .footer__tagline p {
    margin: 0;
  }
  footer .footer__links,
  footer .footer__contact {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.9rem;
  }
  footer .footer__links a:hover,
  footer .footer__contact a:hover {
    color: var(--color-accent);
  }
  footer .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / 15%);
    font-size: 0.8rem;
    opacity: 0.75;
  }
  footer .footer__payment {
    display: flex;
    gap: 1rem;
  }
  footer .footer__disclaimer {
    margin-top: 1.25rem;
    font-size: 0.75rem;
    line-height: 1.5;
    opacity: 0.6;
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:10) */
header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-header-background);
    color: var(--color-header-foreground);
  }
  header .header__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0 var(--page-margin);
    position: relative;
  }
  header .header__toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  header .header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
  }
  header .header__toggle-input:focus-visible + .header__toggle {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  header .header__toggle-bar {
    display: block;
    height: 2px;
    background: var(--color-header-foreground);
    border-radius: 1px;
  }
  header .header__panel {
    display: contents;
  }
  header .header__logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--color-header-foreground);
  }
  header .header__logo-mark {
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    display: block;
  }
  header .header__logo-lockup {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }
  header .header__logo-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
  }
  header .header__logo-sub {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--color-muted);
    margin-top: 0.2rem;
  }
  header .header__menu {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
  }
  header .header__menu a,
  header .header__menu-label {
    text-decoration: none;
    color: var(--color-header-foreground);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.15s ease;
  }
  header .header__menu a:hover,
  header .header__menu-item--has-dropdown:hover .header__menu-label,
  header .header__menu-item--has-dropdown:focus-within .header__menu-label {
    border-color: var(--color-accent);
  }
  header .header__menu-label {
    display: inline-block;
    cursor: default;
    outline: none;
  }
  header .header__menu-item {
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: -0.75rem;
  }
  header .header__menu-caret {
    display: inline-block;
    margin-left: 0.15em;
    font-size: 0.75em;
  }
  header .header__dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 15rem;
    padding: 0.5rem 0;
    background: var(--color-background);
    border-radius: var(--style-border-radius-inputs);
    box-shadow: 0 12px 24px rgb(0 0 0 / 20%);
    z-index: 20;
  }
  header .header__menu-item--has-dropdown:hover .header__dropdown,
  header .header__menu-item--has-dropdown:focus-within .header__dropdown {
    display: flex;
  }
  header .header__dropdown a {
    color: var(--color-foreground);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.9rem;
    padding: 0.6rem 1.25rem;
    border-bottom: none;
  }
  header .header__dropdown a:hover {
    background: var(--color-secondary-background);
    border-color: transparent;
  }
  header .header__search {
    display: flex;
    align-items: center;
    flex: 1 1 14rem;
    max-width: 20rem;
    background: rgb(255 255 255 / 15%);
    border-radius: 999px;
    padding-left: 1rem;
  }
  header .header__search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--color-header-foreground);
    font: inherit;
    font-size: 0.9rem;
    padding: 0.55rem 0;
  }
  header .header__search input::placeholder {
    color: var(--color-header-foreground);
    opacity: 0.92;
  }
  header .header__search input:focus {
    outline: none;
  }
  header .header__search button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: transparent;
    border: none;
    color: var(--color-header-foreground);
    cursor: pointer;
  }
  header .header__search svg {
    width: 1.15rem;
  }
  header a {
    position: relative;
    text-decoration: none;
    color: var(--color-header-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  header a sup {
    position: absolute;
    top: -0.4rem;
    right: -0.6rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.65rem;
    line-height: 1.1rem;
    text-align: center;
  }
  header svg {
    width: 1.75rem;
  }
  header .header__icons {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  header .header__icon-search {
    display: none;
    cursor: pointer;
  }
  header .header__mobile-search {
    display: none;
  }

  @media screen and (max-width: 45rem) {
    header .header__inner {
      height: auto;
      gap: 0.75rem;
      padding: 1rem var(--page-margin);
    }
    header .header__toggle {
      display: flex;
      order: 1;
      flex: 0 0 auto;
    }
    header .header__logo {
      order: 2;
      min-width: 0;
      flex: 0 1 auto;
    }
    header .header__logo-mark {
      width: 1.6rem;
      height: 1.6rem;
    }
    header .header__logo-word {
      font-size: 1rem;
    }
    header .header__logo-sub {
      font-size: 0.55rem;
    }
    header .header__icons {
      order: 3;
      margin-left: auto;
      gap: 0.75rem;
      flex: 0 0 auto;
    }
    header svg {
      width: 1.5rem;
    }
    header .header__icon-search {
      display: flex;
    }

    header .header__panel {
      display: none;
      order: 5;
      flex-direction: column;
      gap: 1rem;
      width: 100%;
      margin-top: 1rem;
    }
    header .header__toggle-input#header-menu-toggle:checked ~ .header__panel {
      display: flex;
    }
    header .header__menu {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
    header .header__menu-item {
      padding: 0;
      margin: 0;
    }
    header .header__menu a,
    header .header__menu-label {
      display: block;
      padding: 0.85rem 0;
      border-bottom: 1px solid rgb(255 255 255 / 15%);
    }
    header .header__dropdown {
      display: flex;
      position: static;
      min-width: 0;
      margin-top: 0;
      padding: 0 0 0.5rem 1rem;
      background: none;
      box-shadow: none;
    }
    header .header__dropdown a {
      padding: 0.6rem 0;
      border-bottom: none;
      color: var(--color-header-foreground);
      font-size: 0.85rem;
    }
    header .header__panel .header__search {
      display: none;
    }

    header .header__mobile-search {
      display: none;
      order: 4;
      width: 100%;
      align-items: center;
      gap: 0.5rem;
      margin-top: 1rem;
    }
    header .header__toggle-input#header-search-toggle:checked ~ .header__mobile-search {
      display: flex;
    }
    header .header__mobile-search .header__search {
      flex: 1 1 auto;
      max-width: none;
    }
    header .header__mobile-search-close {
      flex: 0 0 auto;
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.1rem;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:11) */
/* No product/car photography in the hero by design -- available photos were either a
     casual snapshot (didn't match the rest of the site's tone) or white-background studio
     shots (would blow out as a giant white rectangle against the dark hero). This graphic
     treatment (gradient + faint hatch texture + diagonal accent) carries the engineered
     feel without depending on a specific photo asset. section.settings.image is left wired
     up in case a proper dark-shot hero photo gets taken later. */
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--color-header-foreground);
    background: linear-gradient(135deg, #000000 0%, #0c0d0f 55%, #170a0a 100%);
  }

  .hero__backdrop {
    position: absolute;
    inset: 0;
  }

  .hero__image {
    position: absolute;
    inset: 0;
  }
  .hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 84%;
  }
  .hero__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      rgba(10, 0, 0, min(1, calc(var(--overlay-opacity, 0.4) + 0.3))) 0%,
      rgba(10, 0, 0, var(--overlay-opacity, 0.4)) 40%,
      rgba(10, 0, 0, calc(var(--overlay-opacity, 0.4) * 0.35)) 75%,
      rgba(10, 0, 0, 0) 100%
    );
  }

  /* Faint diagonal hairline pattern -- mostly invisible unless you're looking for it,
     reads as a technical surface rather than empty flat black. Sits under .hero__image
     so it's fully hidden whenever a photo is set. */
  .hero__texture {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 14px
    );
  }

  .hero__accent-line {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      115deg,
      transparent 0%,
      transparent 60%,
      var(--color-accent-bright) 60.4%,
      var(--color-accent-bright) 60.9%,
      transparent 61.3%,
      transparent 100%
    );
    opacity: 0.9;
  }

  .hero__content {
    position: relative;
    z-index: 1;
    max-width: 36rem;
    padding: 4rem var(--page-margin);
    min-height: 22rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero__heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  }

  .hero__subheading {
    margin-top: 1.25rem;
    font-size: 1.1rem;
    line-height: 1.5;
    opacity: 0.95;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  }
  .hero__subheading p {
    margin: 0;
  }

  .hero__button {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.9rem 2rem;
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
    border-radius: var(--style-border-radius-inputs);
    transition: background-color 0.15s ease;
  }
  .hero__button:hover {
    background: var(--color-accent-bright);
  }

  .hero__chassis-strip {
    position: relative;
    z-index: 1;
    display: flex;
    overflow-x: auto;
    border-top: 1px solid rgb(255 255 255 / 12%);
  }
  .hero__chassis-strip a {
    flex: 1 0 auto;
    min-width: 9rem;
    text-align: center;
    padding: 1rem 0.75rem;
    text-decoration: none;
    border-right: 1px solid rgb(255 255 255 / 12%);
    transition: background-color 0.15s ease;
  }
  .hero__chassis-strip a:last-child {
    border-right: none;
  }
  .hero__chassis-strip a:hover {
    background: rgb(255 255 255 / 6%);
  }
  .hero__chassis-code {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
  }
  .hero__chassis-models {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  @media screen and (max-width: 45rem) {
    .hero__content {
      min-height: 0;
      padding: 2.75rem var(--page-margin);
    }
    .hero__accent-line {
      display: none;
    }
    .hero__chassis-strip a {
      min-width: 7.5rem;
      padding: 0.85rem 0.6rem;
    }
  }
/* END_SECTION:hero */

/* START_SECTION:page (INDEX:12) */
.page {
    max-width: 50rem;
    margin: 0 auto;
    padding: 3rem 0 4rem;
  }
  .page__title {
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .page__content {
    margin-top: 1.5rem;
    line-height: 1.6;
  }
  .page__content > * + * {
    margin-top: 1.25rem;
  }
  .page__content h2,
  .page__content h3 {
    margin-top: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .page__content a {
    color: var(--color-accent);
  }
  .page__content ul,
  .page__content ol {
    padding-left: 1.5rem;
  }

  .contact-form {
    max-width: 30rem;
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }
  .contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .contact-form__field label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-muted);
  }
  .contact-form__field input,
  .contact-form__field textarea {
    padding: 0.75rem;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-background);
    color: var(--color-foreground);
    font: inherit;
  }
  .contact-form__submit {
    align-self: flex-start;
    padding: 0.9rem 2rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--style-border-radius-inputs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.9rem;
    cursor: pointer;
    transition: filter 0.15s ease;
  }
  .contact-form__submit:hover {
    filter: brightness(1.1);
  }
  .contact-form__success {
    padding: 1rem 1.25rem;
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-secondary-background);
  }
/* END_SECTION:page */

/* START_SECTION:product (INDEX:14) */
.product__app-blocks {
    margin-top: 2rem;
  }

  .product {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    padding: 3rem 0;
    /* .product is itself a grid item of .shopify-section, so it inherits the
       same min-width: auto default — on products with enough thumbnails (6+)
       to push past ~370px of non-shrinking content, that let .product's own
       internal column tracks resolve wider than the page, dragging the whole
       gallery, title, and price out along with it. Fixing only the nested
       .product__gallery below wasn't enough; every level in the chain needs
       this override. */
    min-width: 0;
  }

  .product__gallery,
  .product__info {
    /* Grid items default to min-width: auto, which never shrinks below the
       content's natural size. The thumbnail row below can have 5-7 non-shrinking
       (flex: 0 0 auto) thumbnails, well past 400px combined, so without this
       override that becomes the gallery's — and the whole page's — minimum
       width on products with enough images, forcing horizontal overflow on
       every viewport narrower than that (i.e. every phone). min-width: 0 alone
       proved insufficient here, so width is pinned explicitly too. */
    min-width: 0;
    width: 100%;
  }
  .product__gallery-thumbs {
    /* Without an explicit width this sizes to fit its non-shrinking children
       (same issue as above, one level down) instead of respecting its
       parent — which defeats its own overflow-x: auto and lets the thumbnail
       row's true width leak out as page-level horizontal overflow. */
    max-width: 100%;
  }

  .product__gallery-main {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--style-border-radius-inputs);
    overflow: hidden;
    background: var(--color-secondary-background);
  }
  .product__gallery-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .product__gallery-item {
    display: none;
    position: absolute;
    inset: 0;
  }
  .product__gallery-item .image {
    /* The 'image' snippet's own wrapper defaults to height:auto (sized to the
       image's natural aspect ratio). That leaves height:100% on the <img> below
       unable to resolve (percentage heights need a parent with a definite
       height), so it was silently ignored — this is what let each product's
       actual photo shape (some much shorter than the 4:5 box, e.g. long thin
       spoilers) show through as a grey gap instead of filling the box. */
    height: 100%;
  }
  /* Same specificity as the snippet's own `.image > img { height: auto }` rule,
     so without the extra `.product__gallery-item` qualifier this loses on
     source order — the snippet's rule was winning and re-introducing the gap. */
  .product__gallery-item .image > img,
  .product__gallery-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .product__gallery-radio:checked + .product__gallery-item {
    display: block;
  }

  .product__gallery-thumbs {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    overflow-x: auto;
  }
  .product__gallery-thumb {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--style-border-radius-inputs);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
  }
  .product__gallery-thumb:hover {
    border-color: var(--color-accent);
  }

  .product__vendor {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.85rem;
    color: var(--color-muted);
  }
  .product__title {
    margin-top: 0.35rem;
    font-size: 2rem;
    line-height: 1.15;
  }
  .product__price {
    margin-top: 1rem;
    font-size: 1.4rem;
    font-weight: bold;
  }
  .product__price-compare {
    margin-right: 0.6rem;
    font-weight: normal;
    text-decoration: line-through;
    opacity: 0.6;
  }
  .product__price-sale {
    color: var(--color-accent);
  }
  .product__description {
    margin-top: 1.5rem;
    line-height: 1.6;
  }

  .product__form {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .product__option,
  .product__quantity {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .product__option label,
  .product__quantity label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-muted);
  }
  .product__option select,
  .product__quantity input {
    padding: 0.65rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-background);
    color: var(--color-foreground);
  }
  .product__quantity input {
    max-width: 6rem;
  }

  .product__add-to-cart {
    padding: 1rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--style-border-radius-inputs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .product__add-to-cart:hover {
    background: var(--color-accent-bright);
  }
  .product__add-to-cart:disabled {
    background: var(--color-secondary-background);
    color: var(--color-foreground);
    opacity: 0.6;
    cursor: not-allowed;
  }

  @media screen and (max-width: 50rem) {
    .product {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
  }
/* END_SECTION:product */

/* START_SECTION:search (INDEX:15) */
.search__title {
    padding: 2.5rem 0 1.5rem;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }

  .search__form {
    display: flex;
    max-width: 32rem;
    gap: 0.75rem;
  }
  .search__input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-background);
    color: var(--color-foreground);
  }
  .search__submit {
    padding: 0.75rem 1.5rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--style-border-radius-inputs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.9rem;
    cursor: pointer;
  }

  .search__status {
    margin-top: 1.5rem;
    color: var(--color-muted);
  }

  .search__layout {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 2.5rem;
    align-items: start;
    margin-top: 1.75rem;
    padding-bottom: 3rem;
  }

  .search__filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-secondary-background);
  }
  .search__active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }
  .search__active-filters-label {
    font-size: 0.8rem;
    color: var(--color-muted);
  }
  .search__active-filter {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.8rem;
    text-decoration: none;
  }

  .search__filter-group {
    border-top: 1px solid rgb(255 255 255 / 12%);
    padding-top: 0.75rem;
  }
  .search__filter-group:first-of-type {
    border-top: none;
    padding-top: 0;
  }
  .search__filter-label {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .search__filter-count {
    font-weight: normal;
    color: var(--color-muted);
  }
  .search__filter-values {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
  }
  .search__filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .search__filter-option[data-disabled] {
    opacity: 0.45;
  }
  .search__price-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .search__price-range input {
    width: 100%;
    min-width: 0;
    padding: 0.5rem;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-background);
    color: var(--color-foreground);
  }

  .search__filters-apply {
    padding: 0.7rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--style-border-radius-inputs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.85rem;
    cursor: pointer;
  }

  .search-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.75rem;
  }
  .search-result {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-foreground);
  }
  .search-result__image {
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-secondary-background);
  }
  .search-result__image--placeholder {
    aspect-ratio: 1 / 1;
  }
  .search-result__image--placeholder svg {
    width: 100%;
    height: 100%;
  }
  .search-result__title {
    margin-top: 0.75rem;
    font-size: 0.95rem;
  }
  .search-result__price {
    margin-top: 0.35rem;
    font-size: 0.95rem;
    font-weight: bold;
  }

  .pagination {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding-bottom: 3rem;
    font-size: 0.9rem;
  }
  .pagination a {
    color: var(--color-foreground);
    text-decoration: none;
  }
  .pagination a:hover {
    color: var(--color-accent);
  }
  .pagination .page.current {
    color: var(--color-accent);
    font-weight: bold;
  }

  @media screen and (max-width: 50rem) {
    .search__layout {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:search */

/* START_SECTION:shop-by-model (INDEX:16) */
.shop-by-model {
    background: var(--color-header-background);
  }
  .shop-by-model__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 3.5rem var(--page-margin);
  }
  .shop-by-model__heading {
    color: var(--color-header-foreground);
    font-size: 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-align: center;
    margin-bottom: 2rem;
  }
  .shop-by-model__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1rem;
  }
  .shop-by-model__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: var(--style-border-radius-inputs);
    color: var(--color-header-foreground);
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .shop-by-model__item:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
  }
/* END_SECTION:shop-by-model */

/* START_SECTION:testimonials (INDEX:17) */
.testimonials {
    padding: 3.5rem 0;
  }

  .testimonials__heading {
    font-size: 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-align: center;
    margin-bottom: 2rem;
  }

  .testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
  }

  .testimonials__item {
    padding: 1.75rem;
    background: var(--color-secondary-background);
    border-radius: var(--style-border-radius-inputs);
  }

  .testimonials__rating {
    color: var(--color-accent);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
  }
  .testimonials__star--empty {
    opacity: 0.25;
  }

  .testimonials__quote {
    margin: 0.9rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
  }
  .testimonials__quote::before {
    content: '\201C';
  }
  .testimonials__quote::after {
    content: '\201D';
  }

  .testimonials__attribution {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
  }
  .testimonials__author {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .testimonials__vehicle {
    color: var(--color-muted);
  }
/* END_SECTION:testimonials */

/* START_SECTION:value-props (INDEX:18) */
.value-props {
    background: var(--color-secondary-background);
  }
  .value-props__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding: 3rem 0;
    text-align: center;
  }
  .value-props__icon {
    font-size: 1.75rem;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .value-props__icon svg {
    display: block;
  }
  .value-props__heading {
    margin-top: 0.75rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .value-props__text {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.4;
  }
/* END_SECTION:value-props */

/* START_SECTION:vehicle-finder (INDEX:19) */
{% # Dark panel treatment so this reads as a continuation of the hero above it rather
     # than an abrupt drop into a plain grey admin-style form — same --color-panel-dark
     # used for other hero-adjacent modules. %}
  .vehicle-finder {
    background: var(--color-panel-dark);
    color: #fff;
  }
  .vehicle-finder__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 2.5rem var(--page-margin);
  }
  .vehicle-finder__heading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1.25rem;
  }
  .vehicle-finder__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
  }
  .vehicle-finder__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 11rem;
    flex: 1 1 11rem;
  }
  .vehicle-finder__field label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.6);
  }
  .vehicle-finder__field select {
    /* Relying on flex stretch alone to size a native <select> is unreliable across
       browsers (notably mobile Safari) — an explicit width keeps it consistent. */
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--style-border-radius-inputs);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    color-scheme: dark;
  }
  .vehicle-finder__field select:disabled {
    opacity: 0.5;
  }
  .vehicle-finder__submit {
    flex: 0 0 auto;
    padding: 0.85rem 2rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--style-border-radius-inputs);
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .vehicle-finder__submit:hover {
    background: var(--color-accent-bright);
  }

  @media screen and (max-width: 40rem) {
    .vehicle-finder__form {
      flex-direction: column;
      align-items: stretch;
    }
    /* .vehicle-finder__field has `flex: 1 1 11rem`, where 11rem is meant as a
       WIDTH basis for the desktop row layout. Once the form above switches to a
       column, flex-basis applies along the (now vertical) main axis instead —
       silently turning that 11rem into a forced ~176px MINIMUM HEIGHT per field,
       which is the huge empty gap between Make/Model/Year on mobile. */
    .vehicle-finder__field {
      flex: 0 1 auto;
      min-width: 0;
    }
  }
/* END_SECTION:vehicle-finder */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:20) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:21) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:image (INDEX:23) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:product-card (INDEX:25) */
.product-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-foreground);
  }

  /* Dark mat around the product photo -- most of the catalog's photography is shot on
     white, so without this the cards were reading as stray white rectangles against the
     dark page. The frame turns that into a deliberate "photo mounted in a dark mat" look
     instead of fighting it. */
  .product-card__frame {
    position: relative;
    padding: 0.85rem;
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-secondary-background);
  }
  .product-card__image {
    border-radius: calc(var(--style-border-radius-inputs) - 2px);
    background: #fff;
    overflow: hidden;
  }
  .product-card__image--placeholder {
    aspect-ratio: 1 / 1;
    background: #fff;
  }
  .product-card__image--placeholder svg {
    width: 100%;
    height: 100%;
  }

  .product-card__pill {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 1;
    background: var(--color-accent-bright);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
  }

  .product-card__content {
    margin-top: 0.75rem;
  }
  .product-card__fit {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product-card__title {
    font-size: 0.95rem;
  }
  .product-card__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.35rem;
  }
  .product-card__price {
    font-size: 0.95rem;
    font-weight: bold;
  }
  .product-card__price--compare {
    margin-right: 0.5rem;
    font-weight: normal;
    text-decoration: line-through;
    opacity: 0.6;
  }
  .product-card__cta {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent-bright);
    white-space: nowrap;
  }
/* END_SNIPPET:product-card */