/* The shop pages (the hub, a listing, the search and brand pages) in
   RaceChip's /shop look: the kit's parts tokens set to the theme's palette
   and fonts, then the stage, the grey shop band, the sidebar, the black bar
   and the product grid of templates/parts/. */
:root {
  --parts-ink: #3c3c3c;
  --parts-ink-soft: #6b6b6b;
  --parts-ink-strong: #3c3c3c;
  --parts-accent: #ea5b0c;
  --parts-accent-strong: #c85a1e;
  --parts-focus: #ea5b0c;
  --parts-border: #c8c8c8;
  --parts-surface: #e9e9e9;
  --parts-bg: #fff;
  --parts-photo-bg: #fff;
  --parts-chip-bg: #fff;
  --parts-rail-bg: #fff;
  --parts-rail-rule: #e9e9e9;
  --parts-rail-rule-soft: #f0f0f0;
  --parts-rail-shadow: none;
  --parts-bar-bg: #3c3c3c;
  --parts-bar-ink: #fff;
  --parts-card-shadow: none;
  --parts-fit: #529033;
  --parts-stock: #529033;
  --parts-stock-wait: #c85a1e;
  --parts-cta: #529033;
  --parts-cta-hover: #46742f;
  --parts-icon-filter: none;
  --parts-font: Roboto, Arial, Verdana, sans-serif;
  --parts-radius: 0;
  --parts-radius-card: 0;
  --parts-radius-check: 0;
  --parts-radius-chip: 0;
  --parts-radius-image: 0;
  --parts-radius-photo: 0;
  --parts-radius-rail: 0;
  --rc-band: #e9e9e9;
  --rc-head: "BarlowSemiCondensedItalic", Arial, Verdana, sans-serif;
  --rc-head-bold: "BarlowSemiCondensedBoldItalic", Arial, Verdana, sans-serif;
}

/* ---- the stage: the shop's road photo, its title, our picker where its selectors sit ---- */
.rc-stage .rc-stage-ymm { max-width: 928px; margin: 0 auto; padding: 0 16px 48px; }
.rc-stage .cl-ymm { display: flex; flex-wrap: wrap; gap: 4px; align-items: stretch; }
.rc-stage .cl-ymm__field { flex: 1 1 200px; position: relative; }
.rc-stage .cl-ymm .cl-select,
.rc-stage .cl-ymm__btn { width: 100%; height: 60px; padding: 0 44px 0 20px; border: 0; border-radius: 0; background: #e9e9e9; color: #3c3c3c; font: italic 20px/60px Roboto, Arial, Verdana, sans-serif; text-align: left; appearance: none; -webkit-appearance: none; }
.rc-stage .cl-ymm__btn::after { content: ""; position: absolute; right: 22px; top: 22px; width: 9px; height: 9px; border-right: 3px solid #ea5b0c; border-bottom: 3px solid #ea5b0c; transform: rotate(45deg); }

/* ---- the grey shop band and the hub's index ---- */
.rc-hub .no-selection-step { background: var(--rc-band); text-align: center; padding: 0 16px 40px; }
.shop-page .wrapper .page .rc-hub .no-selection-step .no-selection-container { padding-bottom: 0; }
.rc-hub .no-selection-step figure img { max-width: 100%; height: auto; }
.rc-hub .no-selection-step h1,
.rc-title { font: 40px/1.1 var(--rc-head); text-transform: uppercase; color: #3c3c3c; margin: 0; }
.rc-hub .no-selection-step h1 b,
.rc-title b { font-family: var(--rc-head-bold); font-weight: normal; }
.rc-hub-page .stage.small-stage { min-height: 500px; }
.rc-hub-index { background: var(--rc-band); padding: 0 16px 176px; }
.rc-hub-index .content-area { max-width: 1170px; margin: 0 auto; }
.rc-hub-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: center; padding: 0 0 24px; font: 15px/1.3 Roboto, Arial, Verdana, sans-serif; color: #3c3c3c; }
.rc-hub-switch { display: inline-flex; align-items: center; gap: 10px; color: #3c3c3c; text-decoration: none; cursor: pointer; }
.rc-hub-switch-track { position: relative; width: 38px; height: 20px; border-radius: 10px; background: #b9b9b9; }
.rc-hub-switch-track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .1s ease; }
.rc-hub-switch.is-on .rc-hub-switch-track { background: #ea5b0c; }
.rc-hub-switch.is-on .rc-hub-switch-track::after { left: 20px; }
.rc-hub-switch.is-dead { opacity: .6; cursor: default; }
.rc-hub-group { padding: 28px 0 0; }
.wrapper .page .col-main .rc-hub .rc-hub-heading { font: 32px/1.2 var(--rc-head-bold); text-transform: uppercase; color: #3c3c3c; margin: 0 0 14px; text-align: left; }
.rc-hub-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px; }
.rc-hub-tile { position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 48px 0 20px; background: #fff; color: #3c3c3c; font: italic 20px/1.2 Roboto, Arial, Verdana, sans-serif; text-decoration: none; transition: background .15s ease, color .15s ease; }
.rc-hub-tile::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 3px solid #ea5b0c; border-bottom: 3px solid #ea5b0c; transform: rotate(-45deg); }
.rc-hub-tile img { width: 44px; height: 44px; object-fit: contain; }
.rc-hub-tile:hover, .rc-hub-tile:focus-visible { background: #ea5b0c; color: #fff; }
.rc-hub-tile:hover::after, .rc-hub-tile:focus-visible::after { border-color: #fff; }
.rc-hub-status { text-align: center; padding: 24px 0; font: 16px Roboto, Arial, Verdana, sans-serif; }

/* ---- a listing, the search and the brand pages: the shop band, the sidebar beside the grid ---- */
.rc-shop { display: block; background: var(--rc-band); padding: 24px 16px 176px; }
.rc-shop #np-category-page { max-width: 1170px; margin: 0 auto; font-family: var(--parts-font); color: var(--parts-ink); }
.rc-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; font: 13px/1.4 Roboto, Arial, Verdana, sans-serif; text-transform: uppercase; }
.rc-crumbs a { color: #3c3c3c; text-decoration: none; }
.rc-crumbs a:hover { color: #ea5b0c; }
.rc-crumbs [aria-current] { color: #ea5b0c; }
#np-category-page .rc-mast { margin: 0 0 16px; }
.wrapper .page #np-category-page .rc-title { font: 44px/1.1 var(--rc-head-bold); text-transform: uppercase; color: #3c3c3c; margin: 0; }
#np-category-page .npc-rail-title,
#np-category-page .nps-facet-title { font: 22px/1.2 var(--rc-head-bold); text-transform: uppercase; color: #3c3c3c; }
#np-category-page .npc-toc a.is-active,
#np-category-page .npc-toc a[aria-current] { color: #ea5b0c; }

.wrapper .page #np-category-page ol, .wrapper .page #np-category-page ul { list-style: none; }
.wrapper .page #np-category-page ol > li, .wrapper .page #np-category-page ul > li { list-style: none; }

/* the grid of cards */
#np-category-page .npp-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rc-card { display: flex; flex-direction: column; background: #fff; padding: 16px; color: #3c3c3c; font-family: Roboto, Arial, Verdana, sans-serif; }
.rc-card-media { display: block; aspect-ratio: 1; background: #fff; }
.rc-card-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rc-card-badges { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; margin: 12px 0 8px; }
.rc-card-badge { display: inline-block; padding: 3px 8px; background: #529033; color: #fff; font: 12px/16px Roboto, Arial, Verdana, sans-serif; text-transform: uppercase; }
.rc-card-badge.is-manufacturer, .rc-card-badge.is-out-of-stock { background: #c85a1e; }
.rc-card-badge--fit { background: #3c3c3c; }
.rc-card-badge--sale { background: #ea5b0c; }
.wrapper .page #np-category-page .rc-card .rc-card-title { margin: 0 0 6px; font: 22px/1.15 var(--rc-head-bold); text-transform: uppercase; }
.rc-card-title a { color: #3c3c3c; text-decoration: none; }
.rc-card-title a:hover { color: #ea5b0c; }
.rc-card-sku { margin: 0 0 8px; font-size: 12px; color: #6b6b6b; }
.rc-card-alert { margin: 0 0 8px; font-size: 13px; color: #c85a1e; }
.rc-card-price { margin: auto 0 12px; }
.rc-card-price .box { font: 28px/1.1 var(--rc-head-bold); color: #3c3c3c; }
.rc-card-list { margin-left: 6px; font: 18px var(--rc-head); color: #8c8c8c; }
.rc-card-buy .rc-card-form { margin: 0; }
.wrapper .page .rc-card .rc-card-cta { display: block; height: auto; line-height: 1; background-image: none; box-shadow: none; margin: 0; width: 100%; padding: 14px 16px; border: 0; border-radius: 0; background: #529033; color: #fff; font: 16px/1 Roboto, Arial, Verdana, sans-serif; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; }
.wrapper .page .rc-card .rc-card-cta:hover { background: #46742f; color: #fff; }

/* a listing or brand page landed on with a vehicle (parts/page.html drops the strip and the sidebar there): the
   page widens to 1280px of content (clear of the fixed side badges at 1440) and the grid takes all of it, 4 cards a row,
   2 on phones, the same card larger */
.rc-shop #np-category-page.rc-vehicle-only { max-width: 1344px; }
#np-category-page.rc-vehicle-only .npc-layout { display: block; }
#np-category-page.rc-vehicle-only .npp-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

@media (max-width: 1199px) {
  #np-category-page .npp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #np-category-page.rc-vehicle-only .npp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .rc-hub .no-selection-step h1, .rc-title, #np-category-page .rc-title { font-size: 28px; }
  .wrapper .page .col-main .rc-hub .rc-hub-heading { font-size: 26px; }
  .rc-stage .rc-stage-ymm { padding-bottom: 24px; }
  /* the stage grows with the vehicle bar (its Clear, a fourth field) instead of its fixed 530px, keeping room for the
     shop content's 120px pull-up over its foot, so the bar's foot is never under the content */
  .shop-page .wrapper .page .stage.small-stage.rc-stage-wrap { height: auto; min-height: 530px; }
  .shop-page .wrapper .page .stage.small-stage.rc-stage-wrap .block-item { height: auto; padding-bottom: 120px; }
  .rc-stage .cl-ymm__field { flex-basis: 100%; }
  #np-category-page .npp-list { grid-template-columns: minmax(0, 1fr); }
  .rc-shop #np-category-page.rc-vehicle-only { padding-left: 0; padding-right: 0; }
  #np-category-page.rc-vehicle-only .npp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #np-category-page.rc-vehicle-only .rc-card { padding: 10px; }
  .wrapper .page #np-category-page.rc-vehicle-only .rc-card .rc-card-title { font-size: 17px; }
  #np-category-page.rc-vehicle-only .rc-card-price .box { font-size: 22px; }
  .wrapper .page #np-category-page.rc-vehicle-only .rc-card .rc-card-cta { padding: 12px 6px; font-size: 14px; }
}

/* The footer of every copied page (/service-support) on our shop pages too: the shop's stylesheet folds it to RaceChip's
   compact shop footer (no contact bubbles, link lists or makes, the fine print inline), so this puts back the theme's
   own footer rules over the .shop-page ones, at its breakpoints; the footer keeps the shop's pull-up (-120px), which
   meets the shop's content-container where a copied page's footer meets its own. */
:is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container { min-height: 500px; padding-top: 60px; padding-bottom: 40px; margin-bottom: 0; }
:is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .footer.footer-blocks,
:is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .footer.footer-blocks .footer-contact-widgets,
:is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .separator.second,
:is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .separator.below-footer-links,
:is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .footer.footer-links-container,
:is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .footer.seo-links-container { display: block; }
:is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .separator.first { margin-top: 50px; }
:is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .copyright address { font-style: italic; }
:is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .copyright .copyright-links { display: none; }
:is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .footer-payment-methods .content-area .payment-icons { width: 80%; }
@media screen and (min-width: 769px) {
  :is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper.no-car-selected .page.page .footer-container .footer-contact-widgets { float: right; margin: 0; }
}
@media screen and (max-width: 992px) {
  :is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .separator.first { margin-top: 5.04032%; }
}
@media screen and (max-width: 768px) {
  :is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container { padding-top: 40px; }
  :is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .separator.first { margin-top: 0; }
  :is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .footer-payment-methods .content-area .payment-icons { width: 100%; }
}
@media screen and (max-width: 480px) {
  :is(.rc-parts-page, .rc-hub-page) .wrapper.wrapper .page.page .footer-container .separator.first { display: none; }
}