@font-face {
  font-family: "Archivo";
  src: url("https://css.mediaresults.com/fonts/bernardiparts/archivo-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Narrow";
  src: url("https://css.mediaresults.com/fonts/bernardiparts/archivo-narrow-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Narrow";
  src: url("https://css.mediaresults.com/fonts/bernardiparts/archivo-narrow-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}


/* Bernardi Parts / Acura
   Load after the BVCommerce theme and page-specific content styles.
   Brand tokens are local to this stylesheet; no shared theme dependency. */
body {
  --bp-accent: #006d77;
  --bp-accent-hover: #005c64;
  --bp-link: #006d77;
  --bp-ink: #202327;
  --bp-muted: #626970;
  --bp-surface: #fafafa;
  --bp-border: #d9dfe3;
  --bp-header: #151515;
  --bp-dark: #151719;
  --bp-radius: 2px;
  --bp-button-radius: 999px;
  --bp-shadow: 0 8px 28px rgba(20, 32, 42, .08);
  --main-color: var(--bp-accent);
  --text-color: var(--bp-ink);
  font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bp-ink);
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.25;
}

/* Explicit controls only: icon fonts, close buttons and image inputs keep their roles. */
button, input, select, textarea { font-family: inherit; }
a { color: var(--bp-link); }
.nav-container a {
  font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
  font-weight: 700;
}
a:hover { color: var(--bp-accent-hover); }
a, .btn, .form-control {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--bp-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #fff;
}

/* Primary and secondary actions. Dropdowns remain form controls, not CTAs. */
.btn:not(.dropdown-toggle):not(.btn-link) {
  min-height: 44px;
  padding: .7em 1.5em;
  border-radius: var(--bp-button-radius);
  font-family: "Archivo", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.4;
  letter-spacing: .025em;
  white-space: normal;
}
.btn.btn-primary, .btn.btn-primary:visited {
  color: #fff;
  background-color: var(--bp-accent);
  background-image: none;
  border-color: var(--bp-accent);
}
.btn.btn-primary:hover, .btn.btn-primary:focus,
.btn.btn-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: var(--bp-accent-hover);
  border-color: var(--bp-accent-hover);
}
.btn.btn-outline-primary {
  color: var(--bp-link);
  background: transparent;
  border-color: var(--bp-accent);
}
.btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus {
  color: #fff;
  background: var(--bp-accent);
}
.btn.btn-dark, .btn.btn-secondary {
  color: #fff;
  background: var(--bp-dark);
  border-color: var(--bp-dark);
}
.btn.btn-dark:hover, .btn.btn-secondary:hover { background: #363b40; }
.btn:disabled, .btn.disabled { cursor: not-allowed; opacity: .6; }
.btn.btn-primary:disabled, .btn.btn-primary.disabled {
  background: var(--bp-accent);
  border-color: var(--bp-accent);
}
.form-control, select.form-control {
  min-height: 46px;
  height: auto;
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  background-color: #fff;
  color: var(--bp-ink);
  font-size: 1rem;
  line-height: 1.5;
  padding: .65em .9em;
}
.form-control::placeholder { color: var(--bp-muted); opacity: 1; }
.form-control:focus {
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px rgba(0, 109, 119, .15);
}
.form-control:disabled, .form-control[readonly] { background: var(--bp-surface); }
/* Preserve Bootstrap validation colors and feedback. */
.form-control.is-invalid { border-color: #dc3545; }
.form-control.is-valid { border-color: #28a745; }

/* Branded masthead. Existing white logos stay on a dark/brand background. */
.bvheader.lg-header .top, .bvheader.xs-header .top, .bvheader.md-header {
  background: var(--bp-header);
}
.bvheader.lg-header .top { height: auto; min-height: 128px; padding-top: 6px; padding-bottom: 12px; }
.bvheader .logo:hover { transform: none; }
.bvheader.lg-header .sites a, .bvheader.lg-header .sites a:visited { color: #fff; }
.bvheader.lg-header .sites a.active { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.bvheader.lg-header .contact a, .bvheader.lg-header .account a, .bvheader.lg-header a.cart {
  background: rgba(0, 0, 0, .22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
}
.bvheader.lg-header a.cart .fa-shopping-cart, .bvheader.lg-header .carttotals { color: #fff; }
.bvheader.lg-header .contact a:hover, .bvheader.lg-header .account a:hover,
.bvheader.lg-header a.cart:hover { background: rgba(0, 0, 0, .4); }
.bvheader.lg-header .searchform .search input.form-control[type="search"] {
  background: #fff;
  border-color: #fff;
  color: var(--bp-ink);
  min-height: 40px;
  padding-right: 42px;
  border-radius: var(--bp-button-radius);
  font-size: .875rem;
  text-transform: none;
}
.bvheader.lg-header .searchform .search > a { color: var(--bp-link); }
.bvheader.xs-header .bottom { background: var(--bp-dark); }
.bvheader.xs-header .bottom a { min-height: 44px; line-height: 44px; }
.bvheader.lg-header .bottom {
  background: #fff;
  border-bottom: 1px solid var(--bp-border);
  box-shadow: 0 3px 10px rgba(20, 32, 42, .04);
}
@media (min-width: 992px) {
  .bvheader .resp-menu .categorymenuplus > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: #fff;
    white-space: normal;
  }
  .bvheader .resp-menu .categorymenuplus > ul > li > a {
    color: var(--bp-ink);
    padding: 4px 10px;
    font-size: .8125rem;
    line-height: 44px;
    font-family: "Archivo", Helvetica, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    box-shadow: inset 0 -3px transparent;
  }
  /* BVCommerce declares these active/hover colors !important. */
  .bvheader .resp-menu .categorymenuplus > ul > li:hover > a,
  .bvheader .resp-menu .categorymenuplus > ul > li.activeChild > a,
  .bvheader .resp-menu .categorymenuplus > ul > li:focus-within > a {
    background: var(--bp-surface) !important;
    color: var(--bp-link) !important;
    box-shadow: inset 0 -3px var(--bp-accent);
  }
  .bvheader .resp-menu .categorymenuplus > ul > li > ul { top: 100%; }
  .bvheader .resp-menu .categorymenuplus > ul > li:focus-within > ul { visibility: visible; opacity: 1; }
}

/* Vehicle / VIN finder: retain the native dropdowns and postback flow. */
.home .finder {
  background-color: var(--bp-dark);
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)),
    url("https://media.mediaresults.com/media/26-integra-hero.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px 0 44px;
}
.home .finder > h4 {
  margin: 0 auto 28px;
  padding: 0 20px;
  max-width: 1100px;
  color: #fff;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1.2;
  text-transform: none;
  letter-spacing: -.025em;
}
/* Override the icon's Bootstrap text-primary utility on the dark hero. */
.home .finder > h4 .text-primary { color: #fff !important; }
.home .finder .fields { background: transparent; padding: 0; }
.home .finder .fields > .container {
  padding: 28px;
  background: rgba(0, 0, 0, .25);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-top: 4px solid var(--bp-accent);
  border-radius: var(--bp-radius);
  box-shadow: var(--bp-shadow);
}
.home .finder h5 { color: #fff; font-size: 1rem; text-transform: none; margin-bottom: 12px; }
.home .finder h5.text-center { color: #e2e5e7; font-size: .8125rem; margin: 16px 0; }
.home .finder h5 a, .home .finder h5 a:visited { color: #fff; }
.home .finder h5 a:hover { color: #e2e5e7; }
.home .finder .drilldown .btn-group { width: 100%; }
.home .finder .drilldown .btn.dropdown-toggle {
  min-height: 52px;
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  background: #fff;
  color: var(--bp-ink);
  padding: 13px 30px 13px 14px;
  font-size: 1rem;
  text-transform: none;
  text-align: left;
  white-space: normal;
}
.home .finder .drilldown .btn.dropdown-toggle:disabled { background: var(--bp-surface); opacity: .7; }
.home .finder .drilldown .btn.dropdown-toggle:not(:disabled):hover,
.home .finder .drilldown .btn.dropdown-toggle[aria-expanded="true"] { border-color: var(--bp-accent); }
.home .finder .input-group { flex-wrap: nowrap; }
.home .finder .input-group .form-control { min-width: 0; height: 52px; border-radius: 4px 0 0 4px; }
.home .finder .input-group .btn { min-height: 52px; border-radius: 0 4px 4px 0; padding: .75em 1.5em; }
.dropdown-menu { border-color: var(--bp-border); border-radius: 4px; box-shadow: var(--bp-shadow); }
.dropdown-item { padding: .5rem 1rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bp-surface); color: var(--bp-link); }
.dropdown-item.active, .dropdown-item:active { background: var(--bp-accent); color: #fff; }

/* Homepage editorial spacing and category cards echo the Articles page. */
.home .feature-content { padding-top: 40px; color: var(--bp-ink); }
.home .feature-content h4 {
  font-size: clamp(1.6rem, 2.5vw, 2.125rem);
  text-transform: none;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 40px auto 24px;
  max-width: 920px;
}
.home .feature-content h4:first-child { margin-top: 0; color: var(--bp-link); }
.home .feature-content p { max-width: 850px; margin: 0 auto 16px; font-size: 1rem; line-height: 1.75; }
.home .features { padding-bottom: 48px; }
.home .features .row { align-items: stretch; row-gap: 24px; }
.home .features .feature { display: flex; }
.home .features .feature a, .home .features .feature a:visited {
  position: relative;
  width: 100%;
  padding: 20px 20px 76px;
  color: var(--bp-ink);
  background: #fff;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  box-shadow: 0 3px 12px rgba(20, 32, 42, .04);
  font-size: 1.2rem;
  line-height: 1.35;
  text-transform: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.home .features .feature a:hover, .home .features .feature a:focus-visible {
  border-color: var(--bp-accent);
  box-shadow: var(--bp-shadow);
}
.home .features .feature a img { width: 100%; max-height: 270px; object-fit: contain; margin-bottom: 20px; }
/* Reuse the real Shop Now label instead of adding CSS-generated copy. */
.home .features .feature a .overlay,
.home .features .feature a:hover .overlay,
.home .features .feature a:active .overlay {
  display: block;
  position: absolute;
  top: auto;
  bottom: 20px;
  left: 20px;
  right: 20px;
  width: auto;
  height: auto;
  background: transparent;
}
.home .features .feature a .overlay .shopnow,
.home .features .feature a:hover .overlay .shopnow,
.home .features .feature a:active .overlay .shopnow {
  width: auto;
  max-width: 220px;
  margin: 0 auto;
  padding: 12px 24px;
  border: 1px solid var(--bp-accent);
  border-radius: var(--bp-button-radius);
  background: var(--bp-accent);
  color: #fff;
  box-shadow: none;
  font-family: "Archivo", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.4;
}
.home .features .feature a:hover .overlay .shopnow { background: var(--bp-accent-hover); }
.home .tabs { background: var(--bp-surface); padding: 48px 0; margin-bottom: 0; }
.home .tabs .nav-tabs { border: 0; gap: 4px; margin-bottom: 20px; }
.home .tabs .nav-tabs .nav-link {
  color: var(--bp-muted);
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--bp-button-radius);
  text-transform: none;
  font-size: .9375rem;
}
.home .tabs .nav-tabs .nav-link.active,
.home .tabs .nav-tabs .nav-item.show .nav-link {
  background: var(--bp-accent);
  border-color: var(--bp-accent);
  color: #fff;
}
.home .tabs .tab-content { padding: 32px; border-radius: var(--bp-radius); box-shadow: var(--bp-shadow); line-height: 1.8; }
.home .tabs .tab-content h4 { color: var(--bp-link); text-transform: none; font-size: 1.75rem; }

/* Catalog tiles and product details: cosmetics only, preserve catalog geometry. */
.SingleProductDisplayPanel .record {
  background: #fff;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  padding: 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.SingleProductDisplayPanel .record:hover { border-color: var(--bp-accent); box-shadow: var(--bp-shadow); }
.SingleProductDisplayPanel .record .product-info .recordname a,
.WideSingleProductDisplayPanel .record .product-info .recordname a {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--bp-ink);
}
.SingleProductDisplayPanel .record .product-info .recordname a:hover { color: var(--bp-link); }
.breadcrumbwrapper { background: var(--bp-surface); border-bottom: 1px solid var(--bp-border); }
.breadcrumbwrapper .breadcrumbs { font-size: .8125rem; padding: 12px 0; text-transform: none; }

/* Existing custom content retains its hero images and section layouts. */
.posts-flex .post { border: 1px solid var(--bp-border); border-radius: var(--bp-radius); overflow: hidden; }
.posts-flex .post:hover { box-shadow: var(--bp-shadow); }
#c2a, #outro { background-color: var(--bp-dark); }

/* Dark footer / newsletter finish, with readable links and intact logos. */
.mailingListSignup { background: var(--bp-dark); padding: 36px 20px; }
.mailingListSignup h3 { text-transform: none; font-size: 1.4rem; height: auto; }
.mailingListSignup label { font-size: 1rem; height: auto; }
.mailingListSignup .form-control { width: 260px; max-width: 100%; height: 46px; }
.mailingListSignup .btn { height: auto; min-height: 46px; margin-left: 6px; }
.prefooter { background: #202327; color: #d4d8db; padding: 48px 0 32px; }
.prefooter h6 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.prefooter ul li { margin-bottom: 7px; }
.prefooter ul li a, .prefooter ul li a:visited { color: #d4d8db; font-size: .9375rem; white-space: normal; }
.prefooter ul li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer { background: var(--bp-dark); color: #c6ccd1; padding: 24px 0; border-top: 1px solid #3b4044; }
.footer a, .footer a:visited { color: #fff; }

@media (max-width: 991.98px) {
  .home .finder { padding: 28px 16px; }
  .home .finder .fields > .container { padding: 24px; }
  .prefooter { padding: 32px 16px; }
}
@media (max-width: 767.98px) {
  .home .finder > h4 { padding: 0; margin-bottom: 24px; }
  .home .finder .fields > .container { padding: 20px 16px; }
  .home .finder .drilldown > div { margin-bottom: 12px; }
  .home .finder .drilldown .btn.dropdown-toggle { font-size: 1rem; }
  .home .feature-content { padding-top: 28px; }
  .home .features .feature a { max-width: 440px; margin: 0 auto; }
  .home .tabs { padding: 32px 0; }
  .home .tabs .tab-content { padding: 24px; }
  .home .tabs .nav-tabs .nav-item { flex: 1 1 45%; }
  .home .tabs .nav-tabs .nav-link { height: 100%; text-align: center; }
  .mailingListSignup h3, .mailingListSignup label { display: block; padding: 0; line-height: 1.5; margin-bottom: 12px; }
  .mailingListSignup .form-control { width: min(100%, 320px); }
  .mailingListSignup .btn { margin: 8px 0 0; }
  .prefooter .container img { max-width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  a, .btn, .form-control, .home .features .feature a, .SingleProductDisplayPanel .record { transition: none; }
}

/* Override the legacy search placeholder and newsletter blue at component scope. */
.bvheader.lg-header .searchform .search input.form-control[type="search"]::placeholder {
  font-family: inherit;
  color: var(--bp-muted);
  text-transform: none;
}
.bvheader.lg-header .searchform .search { background: transparent; padding: 0; }
.modal-signup .modal-content { background: var(--bp-header); border-radius: var(--bp-radius); }
.modal-signup .modal-body .l1 { font-size: clamp(1.75rem, 5vw, 3rem); text-transform: none; line-height: 1.2; }
.modal-signup .modal-body .l2 { color: #fff; font-size: 1rem; font-weight: 400; }
.modal-signup .close { color: #fff; opacity: 1; }
.modal-signup .input-group .btn { border-radius: 0 4px 4px 0; }
.modal-signup .input-group .form-control { border-radius: 4px 0 0 4px; }

/* BVCommerce catalog cards and Bootstrap's explicit brand utilities. */
.text-primary { color: var(--bp-accent) !important; }
.bg-primary { background-color: var(--bp-accent) !important; }
.border-primary { border-color: var(--bp-accent) !important; }
.categorygrid .record {
  background: #fff;
  border-radius: var(--bp-radius);
  padding: 16px;
  box-shadow: 0 3px 12px rgba(20, 32, 42, .04);
}
.categorygrid .record:focus-within, .categorygrid .record:hover { box-shadow: var(--bp-shadow); }
/* Category actions are plain anchors, so they do not inherit the .btn theme. */
.categorygrid .recordname a,
.categorygrid .recordname a:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 12px;
  padding: .7em 1em;
  border: 1px solid var(--bp-accent);
  border-radius: var(--bp-button-radius);
  background: var(--bp-accent);
  color: #fff!important;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.categorygrid .recordname a:hover,
.categorygrid .recordname a:focus-visible,
.categorygrid .recordname a:active {
  background: var(--bp-accent-hover);
  border-color: var(--bp-accent-hover);
  color: #fff;
}
.categorygrid .recordChildren a { font-size: .9375rem; }
.main h1:not(.page-title) { font-size: clamp(1.75rem, 3vw, 2.5rem); text-transform: none; line-height: 1.2; }

/* Native mobile menu keeps its existing open/close behavior. */
@media (max-width: 991.98px) {
  .bvheader .mobile-nav-bars a, .bvheader a.momenu { color: #fff; }
  .resp-menu .categorymenuplus > ul { background: #fff; }
  .resp-menu .categorymenuplus > ul li a {
    color: var(--bp-ink);
    border-color: var(--bp-border);
    min-height: 44px;
    padding: 12px 20px;
    font-size: 1rem;
    text-transform: none;
  }
  .resp-menu .categorymenuplus > ul > li.activeChild > a,
  .resp-menu .categorymenuplus > ul > li:hover > a,
  .resp-menu .categorymenuplus > ul > li > a:focus-visible {
    color: var(--bp-link) !important;
    background: var(--bp-surface) !important;
    box-shadow: inset 4px 0 var(--bp-accent);
  }
}

/* The Articles stylesheet removes container padding; reset its outer grid gutters too. */
.main.pt-4:has(#recent-posts) > .container > .row,
.main.pt-4:has(#recent-posts) .template-grid { margin-left: 0; margin-right: 0; }
.main.pt-4:has(#recent-posts) > .container > .row > .col-12,
.main.pt-4:has(#recent-posts) .template-grid > .col-lg-12 { padding-left: 0; padding-right: 0; }

/* Catalog sidebar: replace the template's hard-coded blue at every nesting level. */
.side-nav .categorymenuplus > ul > li > a {
  background: var(--bp-surface);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 700;
}
.side-nav .categorymenuplus li > a.active {
  background: var(--bp-accent) !important;
  color: #fff !important;
}

/* Verified against Acura of Boston: white masthead, rounded CTAs,
   custom shopping teal #006d77 / #005c64 and service navy #1f2a44 / #182238. */
.btn:not(.dropdown-toggle):not(.btn-link),
.home .features .feature a .overlay .shopnow {
  font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
}
.btn.btn-secondary { background: #1f2a44; border-color: #1f2a44; }
.btn.btn-secondary:hover, .btn.btn-secondary:focus { background: #182238; border-color: #182238; }
.bvheader.lg-header .top, .bvheader.xs-header .top, .bvheader.md-header {
  background: #fff;
  color: var(--bp-ink);
}
/* The existing transparent, white header marks become black on the white masthead. */
.bvheader .logo img { filter: brightness(0); }
.bvheader.lg-header .top .telephone a, .bvheader.lg-header .top .social a,
.bvheader.lg-header .sites a, .bvheader.lg-header .sites a:visited,
.bvheader.lg-header .sites a.active, .bvheader.lg-header .sites li::after {
  color: var(--bp-ink);
}
.bvheader.lg-header .contact a, .bvheader.lg-header .account a,
.bvheader.lg-header a.cart { background: var(--bp-surface); border-color: var(--bp-border); color: var(--bp-ink); }
.bvheader.lg-header .contact a:hover, .bvheader.lg-header .account a:hover,
.bvheader.lg-header a.cart:hover { background: #e9edef; }
.bvheader.lg-header a.cart .fa-shopping-cart, .bvheader.lg-header .carttotals { color: var(--bp-ink); }
.bvheader.lg-header .searchform .search { border: 1px solid var(--bp-border); border-radius: 999px; }
.bvheader.lg-header .searchform .search input.form-control[type="search"] { background: var(--bp-surface); }
.bvheader .mobile-nav-bars a, .bvheader a.momenu,
.bvheader.xs-header .top a.cart, .bvheader.xs-header .top a.cart .fa-shopping-cart,
.bvheader.xs-header .top .carttotals, .bvheader.md-header .carttotals,
.bvheader.md-header a.cart .fa-shopping-cart,
.bvheader.md-header .mobilephone a, .bvheader.md-header .mobilesearch a,
.bvheader.md-header .mobileaccount a, .bvheader.md-header .mobilecontact a { color: var(--bp-ink); }
.bvheader.md-header .mobilephone a:hover, .bvheader.md-header .mobilesearch a:hover,
.bvheader.md-header .mobileaccount a:hover, .bvheader.md-header .mobilecontact a:hover {
  color: var(--bp-accent) !important;
}