/* devil.design: carbon black, signal red, and quiet surfaces for the parts. */
:root {
  --dd-ink: #151518;
  --dd-paper: #f6f6f7;
  --dd-white: #fff;
  --dd-muted: #59595f;
  --dd-line: #d9d9de;
  --dd-red: #c71930;
  --dd-signal: #ff5968;
  --dd-carbon: #101012;
  --dd-radius: 3px;
}
body.dd-site { background: var(--dd-paper); color: var(--dd-ink); }
.dd-site :focus-visible { outline: 3px solid #e82c45; outline-offset: 4px; }
.dd-site ::selection { background: #c71930; color: #fff; }
.dd-site h1, .dd-site h2, .dd-site h3 { font-weight: 750; }
.dd-site .dd-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px; letter-spacing: .13em; font-weight: 600;
}
.dd-site .dd-eyebrow::before {
  content: ""; display: block; flex: 0 0 17px; height: 6px;
  background: var(--dd-red); transform: skewX(-24deg);
}

/* A continuous dark header keeps identity, navigation and region together. */
.dd-announcement { background: #070708; color: #bdbdc4; font-size: 10px; }
.dd-header { background: #101012; border-bottom: 2px solid var(--dd-red); backdrop-filter: none; }
.dd-header .dd-identity, .dd-header .dd-wordmark { color: #fff; }
.dd-header .dd-wordmark { font-weight: 800; letter-spacing: -1.2px; }
.dd-header .dd-wordmark > span { color: var(--dd-signal); }
.dd-header .dd-wordmark small { color: #c1c1c8; letter-spacing: 1px; }
.dd-header [data-devil-logo] { --dd-logo-filter: invert(1); --dd-logo-color: #f5f5f7; }
.dd-header nav a, .dd-header-actions a { color: #ededf0; }
.dd-header nav a { padding: 7px 0; border-bottom: 2px solid transparent; }
.dd-header nav a:hover, .dd-header nav a[aria-current=page] { color: #fff; border-bottom-color: var(--dd-signal); }
.dd-header-actions .dd-contact-header { background: var(--dd-red); padding: 11px 17px; }
.dd-header-actions .dd-contact-header:hover { background: #a91328; }
.dd-header-actions > a:hover { color: #fff; }
.dd-cart-count { background: #fff; color: #161618; }
.dd-menu-toggle { color: #fff; }
.dd-region-bar { background: #1b1b1f; color: #e3e3e8; border-top: 1px solid #36363d; padding-top: 8px; padding-bottom: 8px; }
.dd-region-bar select { background: #28282e; border-color: #5b5b65; color: #fff; color-scheme: dark; }
.dd-region-bar small { color: #c1c1c8; }

/* Red is a deliberate emphasis, with a consistent readable image overlay. */
.dd-hero { background: var(--dd-carbon); }
.dd-hero-slide { min-height: 630px; }
.dd-hero-slide::after { background: linear-gradient(90deg,rgba(7,7,9,.94) 0%,rgba(7,7,9,.84) 60%,rgba(7,7,9,.3) 84%,rgba(7,7,9,.16)); }
.dd-hero-content { padding-top: 94px; padding-bottom: 130px; }
.dd-site .dd-hero h1, .dd-site .dd-hero h2 { font-weight: 750; letter-spacing: -.06em; max-width: 760px; }
.dd-hero-key { color: var(--dd-signal); }
.dd-hero .dd-eyebrow { color: #d3d3da; }
.dd-hero .dd-eyebrow::before { background: var(--dd-signal); }
.dd-hero-content > p:not(.dd-eyebrow) { color: #e0e0e5; max-width: 38ch; font-size: 17px; }
.dd-hero-index { color: #c9c9d0; font-family: Consolas, monospace; font-size: 10px; }
.dd-hero-controls { gap: 6px; }
.dd-hero-controls button { border: 1px solid #777780; border-bottom: 3px solid #777780; color: #ededf1; background: #101012; padding: 9px 16px; }
.dd-hero-controls button[aria-pressed=true] { background: var(--dd-red); border-color: var(--dd-red); color: #fff; }
.dd-hero-controls button:hover { background: #303036; color: #fff; }
.dd-site .dd-button { background: var(--dd-red); color: #fff; font-size: 14px; padding: 16px 25px; }
.dd-site .dd-button:hover { background: #a91328; color: #fff; transform: none; }
.dd-proof-strip { max-width: none; background: #17171a; border-bottom: 1px solid #343439; padding: 24px max(36px,calc((100vw - 1248px)/2)); gap: 24px; }
.dd-proof-strip span { color: var(--dd-signal); font-family: Consolas, monospace; font-size: 11px; }
.dd-proof-strip strong { color: #ededf1; font-family: Inter,"Segoe UI",Arial,sans-serif; font-size: 12px; }

/* Product and reading surfaces stay light, without tinting real photography. */
.dd-section { padding-top: 84px; padding-bottom: 84px; }
.dd-featured { padding-top: 0; }
.dd-section-heading { margin-bottom: 34px; }
.dd-section-heading h2 { font-size: clamp(31px,3.6vw,49px); }
.dd-text-link { border-bottom: 2px solid var(--dd-red); padding-bottom: 7px; }
.dd-brand-track .dd-brand-card { background: #fff; border: 1px solid var(--dd-line); }
.dd-brand-track .dd-brand-card:hover { border-color: #151518; transform: translateY(-2px); }
.dd-site ul.products li.product { border-bottom: 1px solid #bcbcc4; padding-bottom: 25px; }
.dd-site ul.products li.product img { background: #fff; border: 1px solid #e0e0e5; }
.dd-site ul.products li.product h2 { font-weight: 650; font-size: 17px !important; line-height: 1.4; }
.dd-site ul.products li.product .price { color: #151518; font-size: 16px; }
.dd-site ul.products li.product .button { background: #18181b; color: #fff; border-color: #18181b; padding: 10px 15px; font-size: 12px; }
.dd-site ul.products li.product .button:hover { background: var(--dd-red); border-color: var(--dd-red); color: #fff; }
.dd-product-brand { color: #59595f; }
.dd-collection-context { border-left: 3px solid var(--dd-red); padding-left: 14px; color: #55555d; }
.dd-engineering-panel { background: #111113; border-block: 1px solid #35353d; padding: 90px 0; }
.dd-engineering-panel h2 { color: #fff; padding-left: 23px; border-left: 4px solid var(--dd-red); }
.dd-engineering-panel .dd-eyebrow { color: #ff7783; }
.dd-engineering-panel p { color: #dedee4; line-height: 1.75; }
.dd-site .dd-engineering-panel .dd-button-light { background: #fff; color: #171719; }
.dd-site .dd-engineering-panel .dd-button-light:hover { background: #e8e8ed; color: #171719; }
.dd-article-card { background: #fff; border-color: var(--dd-line); border-bottom: 3px solid #161619; }
.dd-article-card:hover { border-bottom-color: var(--dd-red); }
.dd-article-card h3 { font-weight: 700; }

/* One visual language for finding parts, choosing a vehicle and checking out. */
.dd-catalogue-tools { background: #fff; border-color: #d5d5dd; border-top: 3px solid var(--dd-red); }
.dd-site .dd-store-switch a { background: #fff; border-color: #b7b7c0; }
.dd-site .dd-store-switch a[aria-current=page] { background: #161619; color: #fff; border-color: #161619; box-shadow: inset 0 -3px 0 var(--dd-red); }
.dd-site .dd-shop-search input[type=search] { background: #f7f7f9; border-color: #9797a1; }
.dd-site .dd-search-entry button { background: var(--dd-red); color: #fff; }
.dd-site .dd-browse-tabs button { color: #55555d; }
.dd-site .dd-browse-tabs button[aria-selected=true] { color: #151518; border-bottom-color: var(--dd-red); }
.dd-site .dd-category-browser a { background: #f8f8fa; border-color: #d5d5dc; color: #202024; }
.dd-site .dd-category-browser a:hover, .dd-site .dd-category-browser a[aria-current=page] { background: #fff; border-color: var(--dd-red); color: #a61528; box-shadow: inset 0 -3px 0 var(--dd-red); }
.dd-category-icon { color: #50505a; }
.dd-site .dd-category-browser a:hover .dd-category-icon, .dd-site .dd-category-browser a[aria-current=page] .dd-category-icon { color: #b4152b; }
.dd-site .dd-store-pagination { background: #ececef; border-color: #cacad2; border-left-color: var(--dd-red); }
.dd-site .dd-page-link, .dd-site .dd-page-jump button { background: #1b1b1f; border-color: #1b1b1f; }
.dd-site .dd-page-link:hover, .dd-site .dd-page-jump button:hover { background: var(--dd-red); border-color: var(--dd-red); }
.dd-site .dd-page-link[aria-disabled=true] { background: transparent; color: #64646d; border-color: #b9b9c2; }
.dd-no-results-help, .dd-enquiry-context-note { background: #eeeef1; color: #29292e; border-left-color: var(--dd-red); }
.dd-site .dd-garage-toolbar { background: #f4f4f6; border-color: #d3d3dc; border-radius: 3px; }
.dd-site .dd-garage-toolbar strong, .dd-site .dd-garage-toolbar p { color: #303037; }
.dd-garage-bar { background: #161619; border: 1px solid #585862; border-left: 3px solid var(--dd-red); border-radius: 4px; box-shadow: 0 5px 20px #0003; }
.dd-garage-bar button:hover { color: #ff9aa4; }
.dd-garage-dialog { border-top: 4px solid var(--dd-red); border-radius: 6px; }
.dd-garage-dialog .dd-garage-eyebrow { color: #a8182c; }
.dd-garage-dialog .dd-garage-primary { background: var(--dd-red); color: #fff; }
.dd-site.single-product .woocommerce-product-gallery img { background: #fff; }
.dd-site li.product.product_cat-dgr img { background: transparent; }
.dd-site .single_add_to_cart_button, .dd-site .checkout-button, .dd-site #place_order { background: var(--dd-red); color: #fff; }
.dd-site .wpforms-submit { background: var(--dd-red) !important; color: #fff !important; border-color: var(--dd-red) !important; }
.dd-service-hero, .dd-service-band { border-top: 3px solid var(--dd-red); }
.dd-site .dd-service-hero { background: #f0f0f3; }
.dd-footer { background: #0d0d0f; color: #c8c8d0; border-top: 4px solid var(--dd-red); }
.dd-footer .dd-wordmark { color: #fff; font-size: 36px; letter-spacing: -1.7px; }
.dd-footer .dd-wordmark > span { color: var(--dd-signal); }
.dd-footer-top h2 { color: #f1f1f5; }
.dd-footer a:hover { color: #ff9aa4; }
.dd-footer-bottom { border-top-color: #3b3b43; color: #bdbdc6; }

@media(max-width:800px) {
  .dd-header nav { background: #18181c; border-bottom-color: #4b4b54; }
  .dd-header-actions .dd-contact-header { padding: 9px 11px; }
  .dd-hero-slide { min-height: 580px; }
  .dd-hero-content { padding: 78px 24px 132px; }
  .dd-hero-content > p:not(.dd-eyebrow) { font-size: 15px; }
  .dd-hero-slide::after { background: linear-gradient(90deg,rgba(7,7,9,.93),rgba(7,7,9,.84) 70%,rgba(7,7,9,.76)); }
  .dd-proof-strip { padding: 22px 24px; gap: 17px 14px; }
  .dd-proof-strip strong { display: block; margin: 3px 0 0; font-size: 11px; }
  .dd-section { padding-top: 56px; padding-bottom: 56px; }
  .dd-featured { padding-top: 0; }
  .dd-engineering-panel { padding: 62px 0; }
  .dd-site ul.products li.product h2 { font-size: 14px !important; }
  .dd-site ul.products li.product .price { font-size: 14px; }
  .dd-site ul.products li.product .button { font-size: 11px; padding: 9px 12px; }
}
@media(max-width:420px) {
  .dd-site .dd-hero h1, .dd-site .dd-hero h2 { font-size: 56px; }
  .dd-hero-index { bottom: 86px; font-size: 9px; max-width: none; }
  .dd-hero-controls { left: 24px; right: auto; bottom: 25px; }
  .dd-hero-controls button { font-size: 11px; padding: 8px 16px; }
  .dd-header .dd-wordmark { font-size: 22px; }
}
@media(prefers-reduced-motion:reduce) {
  .dd-brand-track .dd-brand-card:hover { transform: none; }
}