/* BKC red, white and brushed silver. Product content and behavior are unchanged. */
:root {
  --accent: #c8102e;
  --accent-hover: #a90b25;
  --focus: #a90b25;
  --paper: #fff;
  --ink: #24272c;
  --muted: #565b63;
  --line: #d8dde2;
  --metal-border: #b4bbc3;
  --metal-surface:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 12%) 0 1px, rgb(75 85 99 / 3%) 1px 2px, transparent 2px 4px),
    linear-gradient(175deg, #fff 0%, #edf0f3 35%, #cbd1d7 53%, #e8ecf0 80%, #d8dfe5 100%);
  --metal-hover:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 12%) 0 1px, rgb(75 85 99 / 3%) 1px 2px, transparent 2px 4px),
    linear-gradient(175deg, #fff 0%, #f6f8fa 35%, #dce1e6 53%, #f3f5f7 80%, #e6ebef 100%);
  --metal-panel:
    repeating-linear-gradient(0deg, rgb(95 106 121 / 2.5%) 0 1px, transparent 1px 4px),
    linear-gradient(115deg, #fff 0%, #f1f3f5 32%, #e0e5ea 65%, #f8f9fb 100%);
  --metal-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(255 255 255 / 50%), 0 3px 0 #9ca5af, 0 5px 9px rgb(43 53 66 / 15%);
  --red-surface: linear-gradient(180deg, #d51c3a 0%, #c8102e 50%, #b70d29 100%);
  --red-shadow: inset 0 1px 0 rgb(255 255 255 / 38%), 0 3px 0 #8b1024, 0 6px 10px rgb(43 53 66 / 18%);
  --panel-shadow: 0 2px 3px rgb(66 79 95 / 7%), 0 10px 24px rgb(66 79 95 / 9%);
}

::selection { background: #f5c9d1; color: #48131d; }
.skip-link { color: #fff; }

/* White logo panel, red navigation and a silver active tab. */
.site-header { background: #fff; color: var(--ink); box-shadow: 0 3px 12px rgb(33 42 55 / 16%); }
.header-search {
  border-color: var(--metal-border);
  box-shadow: inset 0 2px 4px rgb(52 64 80 / 9%), 0 1px 0 #fff;
}
.header-search button { color: #4b535e; background: var(--metal-panel); border-left: 1px solid #d8dde2; }
.header-search button:hover { background: var(--metal-surface); color: var(--accent); }
.header-nav-shell {
  background: var(--red-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), inset 0 -2px 0 rgb(93 8 27 / 30%);
}
.nav-links > a { color: #fff; text-shadow: 0 1px 1px rgb(91 8 24 / 25%); }
.nav-links > a:hover { background: #a90b25; color: #fff; }
.nav-links > a.active, .nav-links > a.active:hover {
  color: #9e1027; background: var(--metal-surface);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #939ba6, 0 4px 7px rgb(70 7 22 / 28%);
  text-shadow: 0 1px 0 #fff;
}
.nav-links > a.active:hover { background: var(--metal-hover); }
.site-header :focus-visible, .hero :focus-visible, .page-title :focus-visible,
.dark :focus-visible, .footer :focus-visible { outline-color: var(--focus); }
.nav-links :focus-visible { outline-color: #fff; }

/* Silver controls have a brushed face and a shallow machined edge. */
.btn, .dark .btn:not(.primary), .page-title .btn:not(.primary),
.catalog-card-actions .btn.catalog-details-link, .mobile-toggle {
  background: var(--metal-surface); color: var(--ink); border: 1px solid var(--metal-border);
  box-shadow: var(--metal-shadow); text-shadow: 0 1px 0 rgb(255 255 255 / 85%);
}
.btn:hover, .dark .btn:not(.primary):hover, .page-title .btn:not(.primary):hover,
.catalog-card-actions .btn.catalog-details-link:hover, .mobile-toggle:hover {
  background: var(--metal-hover); color: #181c22; border-color: #9ca6b0;
}
.btn.primary, .dark .btn.primary, .page-title .btn.primary, .btn.finder-submit {
  background: var(--red-surface); color: #fff; border: 1px solid #ab142d;
  box-shadow: var(--red-shadow); text-shadow: 0 1px 1px rgb(80 5 20 / 28%);
}
.btn.primary:hover, .dark .btn.primary:hover, .page-title .btn.primary:hover, .btn.finder-submit:hover {
  background: linear-gradient(180deg, #c51432, #a90b25); color: #fff; border-color: #970b22;
}
.btn:active, .btn.primary:active, .dark .btn:active, .page-title .btn:active,
.btn.finder-submit:active, .catalog-card-actions .btn.catalog-details-link:active, .mobile-toggle:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgb(40 49 61 / 22%), 0 1px 0 rgb(40 49 61 / 30%);
}
.btn:disabled { box-shadow: none; transform: none; }

/* The left scenery dissolves beneath the copy; the car keeps its proportions. */
.hero { background: #fff; color: var(--ink); }
.hero-slides {
  top: 50%; right: max(0px, calc((100% - 1440px) / 2)); bottom: auto; left: auto;
  width: min(54%, 756px); height: auto; aspect-ratio: 1672 / 940;
  transform: translateY(-50%); overflow: visible;
}
.hero-slides:before {
  content: ''; position: absolute; inset-block: 0; left: -65%; width: 74%;
  background: url('../images/hero-camaro-road.png') left center / 1250% 100% no-repeat;
  filter: blur(18px); opacity: .55; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 8%) 20%, rgb(0 0 0 / 30%) 45%, rgb(0 0 0 / 65%) 70%, #000 87%, transparent);
  mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 8%) 20%, rgb(0 0 0 / 30%) 45%, rgb(0 0 0 / 65%) 70%, #000 87%, transparent);
}
.hero-grid { min-height: clamp(380px, 32vw, 425px); padding-block: 40px; }
.hero-slide-classic {
  z-index: 1; border-radius: 0 12px 12px 0;
  background: url('../images/hero-camaro-road.png') center/cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 35%) 2%, rgb(0 0 0 / 80%) 5%, #000 8%);
  mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 35%) 2%, rgb(0 0 0 / 80%) 5%, #000 8%);
}
.hero:before { content: none; }
.hero h1.athletic-hero-title { text-shadow: 0 1px 0 rgb(255 255 255 / 70%); }
.hero h1 span { color: var(--accent); }
.hero p { color: #41464e; }
.hero-trade-link, .hero-trade-link:hover { color: #a90b25; }
.hero-trade-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.component-finder {
  background: var(--metal-panel); color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #c8cfd6, 0 3px 9px rgb(66 79 95 / 8%);
}
.finder-heading h2, .section-head h2, .feature-row h2 { color: #b50e2a; }
.finder-form select, .catalog-toolbar input, .catalog-toolbar select, .catalog-sort select,
.inquiry-form input, .inquiry-form select, .inquiry-form textarea {
  border-color: #b7bec7;
  box-shadow: inset 0 2px 3px rgb(52 64 80 / 8%), 0 1px 0 rgb(255 255 255 / 90%);
}
.home-text-link, .part-card-link, .product-quote-link:not(.btn) { color: #ae102b; }
.home-text-link:hover, .part-card-link:hover, .product-quote-link:not(.btn):hover,
.catalog-reset:hover, [data-product-reset]:hover { color: #8f0a21; }

/* Product photos stay on white, with silver edges around the cards. */
.category-feature, .category-secondary, .part-card, .catalog-card {
  border-color: #d5dbe1; box-shadow: var(--panel-shadow);
}
.category-feature:hover, .category-secondary:hover, .catalog-card:hover {
  border-color: #b9a0a7;
  box-shadow: 0 3px 5px rgb(66 79 95 / 8%), 0 14px 28px rgb(66 79 95 / 13%);
}
.category-arrow { color: var(--accent); }

/* Silver page banners and supporting panels keep the overall site light. */
.page-title { background: #f1f3f5; color: var(--ink); }
.page-title:before { opacity: .5; }
.page-title:after {
  background: linear-gradient(100deg, #fafbfc 0%, rgb(242 245 247 / 98%) 35%, rgb(231 235 239 / 85%) 58%, rgb(245 247 249 / 18%) 100%);
}
.page-title h1 { color: #b50e2a; }
.page-title p { color: #4c525c; }
.page-title-products { background: var(--metal-panel); }
.page-title-products:after { background: none; }
.breadcrumb, .breadcrumbs { color: #545b65; }
.breadcrumb [aria-current] { color: var(--ink); }
.breadcrumb-arrow, .breadcrumb a:hover { color: var(--accent); }
.dark, .cta-band, .catalog-quote-strip > .container {
  background: var(--metal-panel); color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, var(--panel-shadow);
}
.dark p, .cta-band p, .catalog-quote-strip p { color: #4d5560; }
.trade-band h2, .cta-band h2, .catalog-quote-strip h2 { color: #b50e2a; }
.catalog-quote-strip > .container { border: 1px solid #cdd4dc; border-radius: var(--panel-radius); }
.trade-links > a {
  background: linear-gradient(145deg, #fff, #f7f9fb 60%, #e9edf1); color: var(--ink);
  border-color: #bbc3cc;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #c4ccd5, 0 7px 12px rgb(66 79 95 / 10%);
}
.trade-links a > span > span { color: #525b67; }
.trade-links > a > .ui-arrow { color: var(--accent); }
.dealer-support-card li:before, .quote-checklist span:before {
  background: linear-gradient(145deg, #fff, #a7b0bc); border: 1px solid #a0a9b5;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(51 64 81 / 20%);
}

/* Catalog selection and disclosure handles use red against silver. */
.catalog-filter-section, .catalog-mobile-filters { border-color: #c5cdd6; }
.catalog-filter-heading {
  padding: 12px 10px; margin-bottom: 6px; border-radius: 7px;
  background: var(--metal-panel); color: #333b46;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(51 64 81 / 12%);
}
.catalog-filter-btn:hover { background: #f0f2f5; }
.catalog-filter-btn.active, .catalog-filter-btn.active:hover {
  background: var(--red-surface); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%), 0 2px 0 #950b24, 0 3px 5px rgb(51 64 81 / 13%);
}
.catalog-filter-btn.active .catalog-filter-count { opacity: 1; }
.catalog-page-btn {
  background: var(--metal-surface); color: var(--ink); border-color: #b8c0c9;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #a5aeba;
}
.catalog-page-btn:hover { background: var(--metal-hover); }
.catalog-page-btn.active, .catalog-page-btn[aria-current=page] {
  background: var(--red-surface); color: #fff; border-color: #ab142d;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%), 0 2px 0 #8b1024;
}
.catalog-mobile-filters summary { background: var(--metal-panel); border-radius: 8px; }
.spec-disclosure { border-color: #c9d0d8; box-shadow: 0 3px 0 #c5ccd5, 0 7px 14px rgb(66 79 95 / 9%); }
.spec-disclosure summary, .spec-disclosure[open] summary { background: var(--metal-panel); }
.spec-disclosure summary:hover { background: var(--metal-hover); }
.spec-disclosure[open] .disclosure-content { padding-top: 18px; }
.disclosure-icon, .product-modal-close {
  background: var(--metal-surface); color: #313944; border: 1px solid #bac2cc;
  box-shadow: inset 0 1px 0 #fff, 0 2px 2px rgb(51 64 81 / 18%);
}
.spec-disclosure[open] .disclosure-icon { background: var(--red-surface); color: #fff; border-color: #b0142e; }
.product-modal-close:hover { background: var(--metal-hover); color: var(--accent); }
.product-modal-panel { box-shadow: 0 18px 60px rgb(33 42 55 / 32%); }
.product-facts > div:nth-child(odd), .modal-spec-list > div:nth-child(odd) { background: #f0f3f6; }
.inquiry-form { border-color: #cbd2db; }

.footer { background: linear-gradient(180deg, #f3f5f7, #fff 42%); color: var(--ink); }
.footer h4 { color: #ae102b; }
.footer-grid p, .footer-links { color: #515964; }
.footer-contact { color: #454d58; }
.copyright { color: #626b77; }

@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; }
  .hero-grid { order: 0; min-height: 0; padding-block: 32px 22px; }
  .hero-slides {
    position: relative; inset: auto; order: 1; width: 100%;
    max-width: 756px; margin-inline: auto; height: auto;
    aspect-ratio: 1672 / 940; transform: none; z-index: 0;
  }
  .hero-slides:before { content: none; }
  .hero-slide-classic {
    border-radius: 0; background-size: cover; background-position: center;
    -webkit-mask-image: linear-gradient(180deg, transparent, rgb(0 0 0 / 65%) 8%, #000 16%);
    mask-image: linear-gradient(180deg, transparent, rgb(0 0 0 / 65%) 8%, #000 16%);
  }
  .hero:before { content: none; }
}

@media (max-width: 680px) {
  .hero-slides { border-radius: 0; }
  .header-nav-shell { height: 3px; }
  .nav-links { background: var(--red-surface); }
  .page-title:after {
    background: linear-gradient(90deg, #f9fafb 0%, rgb(242 245 247 / 96%) 55%, rgb(235 239 243 / 76%));
  }
  .page-title-products:after { background: none; }
}