/* listing.css: the listing pages (parts.html, brand/page.html, brand/all.html, shop-by-category.html) in
   the client's own category-page look. Its markup carries the client's class names, so the client's
   style.css and woocommerce.css (theme/head.html) draw the crumbs, the centred uppercase heading, the
   red "please select your vehicle" line, the white shadowed cards two a row, the big black price and the
   blue uppercase button. This file adds what the client's CSS has no rule for: the filter row's
   subcategory boxes, the bar (count, Filter, words, sort), the rail shut behind Filter, the brand and
   stock lines, the Save line, the View style switch, the pager's place, and the phone widths. Colours
   are the client's own (#13469b blue, #000104 ink, #666666 grey, #cbcbcb box rule) or the --site-*
   tokens. */

.fm-ls-main { --fm-blue: var(--site-accent, #13469b); --fm-ink: #000104; --fm-grey: #666666; --fm-rule: #cbcbcb; overflow-x: clip;
  --fm-blue-ink: var(--fm-blue); --fm-on-blue: #fff; --fm-paper: #fff; --fm-icon: #000; --fm-ok: #1d7a33; --fm-bad: #c00; }
/* the dark theme (cl-site.css): the ink near white, the grey words full contrast, the boxes on the page's colour, the blue
   lifted where it is text; a card's photo keeps its white plate (--cs-photo, the card's own white below) */
:root[data-parts-theme="dark"] .fm-ls-main { --fm-ink: #f6f3ef; --fm-grey: #ebe6e0; --fm-rule: #3d3833; --fm-blue-ink: var(--site-accent-ink);
  --fm-paper: #1c1a18; --fm-icon: #f6f3ef; --fm-ok: #5fd07a; --fm-bad: #ff7b6e; }
.fm-ls-main .uppercase { text-transform: uppercase; }

/* ---- the heading (listing/_title.html): the client's crumbs and title section ---- */
.fm-ls-main #breadcrumbs { margin: 0; align-items: center; }
.fm-ls-main #breadcrumbs li { font: 400 16px/1.4 var(--site-font-body, "Open Sans", sans-serif); color: var(--fm-ink); }
.fm-ls-main #breadcrumbs li a, .fm-ls-main #breadcrumbs .bread-cat { color: var(--fm-grey); text-decoration: none; }
.fm-ls-main #breadcrumbs li a:hover { color: var(--fm-blue-ink); }
.fm-ls-main #breadcrumbs .separator { display: inline-flex; align-items: center; }
.fm-title { padding-top: 0; }
.fm-title .df-page-title { font-family: var(--site-font-body, "Open Sans", sans-serif); line-height: 1.15; overflow-wrap: anywhere; }
.fm-title .df-page-title:focus { outline: none; }
.fm-title__text { max-width: 820px; margin: 24px auto 0; font-size: 18px; color: var(--fm-grey); }
.fm-title .select-vehicle { margin-bottom: 0; }
.fm-search { display: flex; gap: 12px; max-width: 720px; margin: 32px auto 0; }
.fm-search .cl-search__q { flex: 1; min-width: 0; }

/* the boxed field: the client's category select (1px #cbcbcb, 8px 20px) */
.fm-box, .fm-ls .all-categories-archive select { height: 44px; padding: 8px 20px; border: 1px solid var(--fm-rule); border-radius: 0; background-color: var(--fm-paper); font: 400 16px/1.5 var(--site-font-body, "Open Sans", sans-serif); color: var(--fm-ink); }
.fm-box:focus, .fm-ls .all-categories-archive select:focus { outline: 2px solid var(--fm-blue); outline-offset: -1px; }

/* ---- the vehicle band: the client's grey compatibility bar ---- */
.fm-ls-main .cl-vb { background: var(--site-band, #f2f2f2); padding: 28px 16px; margin-bottom: 48px; }
.fm-ls-main .cl-vb__in { max-width: 1290px; }
.fm-ls-main .cl-vb__title { font: 600 16px/1.4 var(--site-font-body, "Open Sans", sans-serif); letter-spacing: 0; text-transform: uppercase; color: var(--fm-ink); }

/* ---- the filter row (listing/_filter.html) ---- */
.fm-filter { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; margin-bottom: 24px; }
.fm-filter__cats { display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; flex: 1 1 auto; }
.fm-ls .all-categories-archive { position: static; }
.fm-ls .all-categories-archive select { min-width: 280px; max-width: 100%; }
.fm-subcats ul { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.fm-subcat { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border: 1px solid var(--fm-rule); background: var(--fm-paper); font: 400 16px/1.4 var(--site-font-body, "Open Sans", sans-serif); color: var(--fm-ink) !important; text-decoration: none !important; transition: 0.2s; }
.fm-subcat:hover { border-color: var(--fm-blue-ink); color: var(--fm-blue-ink) !important; }
.fm-subcat.is-current { background: var(--fm-blue); border-color: var(--fm-blue); color: var(--fm-on-blue) !important; }
.fm-js-only { display: none !important; }
html.fm-js .fm-js-only { display: flex !important; }
html.fm-js .all-categories-archive.fm-js-only { display: block !important; }
.fm-filter .product-grid-style { align-items: center; min-height: 44px; font: 400 16px/1 var(--site-font-body, "Open Sans", sans-serif); color: var(--fm-ink); }
.fm-filter .grid-style-item { display: inline-flex; align-items: center; margin: 0 0 0 14px; padding: 0; border: 0; background: none; cursor: pointer; }
.fm-filter .grid-style-item svg { margin: 0; }
.fm-filter .grid-style-item rect { fill: var(--fm-icon); fill-opacity: 0.3; transition: 0.2s; }
.fm-filter .grid-style-item[aria-pressed="true"] rect, .fm-filter .grid-style-item:hover rect { fill: var(--fm-blue); fill-opacity: 1; }

/* ---- the bar (listing/_bar.html) ---- */
.fm-bar { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--site-line, #d7d8d8); }
.fm-bar .cl-bar__count { font: 400 16px/24px var(--site-font-body, "Open Sans", sans-serif); color: var(--fm-grey); }
.fm-bar .cl-bar__switch { color: var(--fm-blue-ink) !important; }
.fm-bar__tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fm-bar__filter { display: inline-flex; align-items: center; height: 44px; margin: 0; padding: 8px 20px; border: 1px solid var(--fm-blue); color: var(--fm-blue-ink); font: 600 14px/1 var(--site-font-body, "Open Sans", sans-serif); text-transform: uppercase; cursor: pointer; user-select: none; transition: 0.2s; }
.fm-bar__filter:hover { background: var(--fm-blue); color: var(--fm-on-blue); }
.fm-bar .cl-bar__within, .fm-bar .cl-bar__sort { width: 260px; }
.fm-ls .primary-button, .fm-search .primary-button { height: 44px; padding: 0 24px !important; line-height: 44px; border: 0; }
html.fm-js .cl-bar__apply { display: none !important; }

/* ---- the rail: shut behind Filter; from 980px a panel over the cards, its groups side by side ---- */
.fm-ls .cl-rail__clear a { color: var(--fm-blue-ink) !important; }
.fm-ls .cl-group__title { font: 700 16px/1.3 var(--site-font-body, "Open Sans", sans-serif); letter-spacing: 0; text-transform: uppercase; color: var(--fm-ink); }
.fm-ls .cl-opt { font-size: 15px; }
.fm-ls .cl-opt.is-picked .cl-box { background: var(--fm-blue); border-color: var(--fm-blue); }
.fm-ls .cl-rail__show { background: var(--fm-blue); color: var(--fm-on-blue); border: 0; font: 600 14px/1 var(--site-font-body, "Open Sans", sans-serif); text-transform: uppercase; justify-content: center; align-items: center; cursor: pointer; }
@media (min-width: 980px) {
  .fm-ls .cl-rail__sheet { display: none; }
  .fm-ls .cl-rail__check:checked ~ .cl-rail__sheet { display: block; margin: -8px 0 32px; padding: 24px 28px 28px; border: 1px solid var(--fm-rule); box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.06); }
  .fm-ls .cl-rail__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .fm-ls .cl-rail__title { margin: 0; font: 700 20px/1.3 var(--site-font-body, "Open Sans", sans-serif); text-transform: uppercase; color: var(--fm-ink); }
  .fm-ls .cl-rail__x { font: 300 32px/1 var(--site-font-body, "Open Sans", sans-serif); color: var(--fm-ink); cursor: pointer; }
  .fm-ls .cl-rail__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 32px; align-items: start; }
  .fm-ls .cl-rail__body .cl-group + .cl-group { margin-top: 0; }
  .fm-ls .cl-rail__clear { grid-column: 1 / -1; margin: 0; }
  .fm-ls .cl-rail__show { display: none; }
}

/* ---- the cards (listing/_item.html): the client's li.product ---- */
.fm-woo { margin-bottom: 96px; }
.fm-woo .shop-products[aria-busy="true"] { opacity: 0.5; transition: opacity 0.2s; }
.fm-woo ul.products { list-style: none; margin: 0; padding: 0; }
.fm-woo ul.products::after { content: none; }
.fm-woo ul.products[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-woo ul.products[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fm-woo ul.products li.product { margin: 0 !important; min-width: 0; float: none; }
.fm-woo ul.products li.product a.woocommerce-loop-product__link { display: block; color: var(--fm-ink); text-decoration: none; }
.fm-woo ul.products li.product a img { display: block; max-width: 100%; }
.fm-woo ul.products li.product:hover .woocommerce-loop-product__title { color: var(--fm-blue-ink); }
.fm-item__brand { display: block; margin-top: 20px; font: 600 13px/1.4 var(--site-font-body, "Open Sans", sans-serif); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fm-grey); }
.fm-woo ul.products li.product .woocommerce-loop-product__title { margin: 0; padding: 0; color: var(--fm-ink); transition: 0.2s; }
.fm-woo .product-details { margin: 4px 0 8px; font: 400 16px/1.6 var(--site-font-body, "Open Sans", sans-serif); color: var(--fm-ink); }
.fm-woo .product-details > span { display: block; }
.fm-woo .product-details b { font-weight: 700; }
.fm-item__stock.is-local { color: var(--fm-ok); }
.fm-item__stock.is-local b, .fm-item__stock.is-out-of-stock b { color: var(--fm-ink); }
.fm-item__stock.is-out-of-stock { color: var(--fm-bad); }
.fm-item__fits { display: flex !important; align-items: center; font-size: 14px; }
.fm-item__alert { font-size: 14px; color: var(--fm-grey); }
.fm-woo ul.products li.product .price { display: block; margin: 0 !important; line-height: 1.2; }
.fm-woo ul.products li.product .price del { opacity: 0.5; margin-right: 6px; }
.fm-woo ul.products li.product .price ins { text-decoration: none; background: none; }
.fm-woo ul.products li.product .price del .woocommerce-Price-amount { font-size: 24px !important; }
.fm-item__cur { font: 400 14px/1 var(--site-font-body, "Open Sans", sans-serif); color: var(--fm-grey); }
.fm-item__save { margin: 2px 0 0; font: 700 16px/1.4 var(--site-font-body, "Open Sans", sans-serif); color: var(--fm-blue-ink); }
/* the stepper (40px - and +, a 16px number, the client's 4px corner) beside Add to cart; on a narrow card the Add
   takes the next line, full width */
.fm-item__buy { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 20px 0 0; }
.fm-item__qty { display: inline-flex; flex: none; border: 1.6px solid var(--fm-ink); border-radius: 4px; background: var(--fm-paper); }
.fm-item__qty button { width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: none; color: var(--fm-ink); font: 700 20px/1 var(--site-font-body, "Open Sans", sans-serif); cursor: pointer; }
.fm-item__qty button:hover { color: var(--fm-blue-ink); }
.fm-item__qty button:focus-visible { outline: 2px solid var(--fm-blue); outline-offset: -2px; }
.fm-item__qty input { width: 44px; height: 40px; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--fm-rule); border-right: 1px solid var(--fm-rule); border-radius: 0; background: var(--fm-paper); color: var(--fm-ink); font: 600 16px/1 var(--site-font-body, "Open Sans", sans-serif); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.fm-item__qty input::-webkit-inner-spin-button, .fm-item__qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fm-woo ul.products li.product .fm-item__buy .button { flex: 1 1 120px; width: auto; }
/* past the stock the stock line's words hide and the Short Line sentence shows (parts.js) */
.fm-item__stock > [hidden] { display: none; }
.fm-item__split { color: var(--fm-ink); font-weight: 700; }
.fm-woo ul.products li.product .button { display: block !important; width: 100%; margin: 20px 0 0; border: 0; text-align: center; line-height: 1.2; }
.fm-woo ul.products li.product .fm-item__buy .button { margin: 0; }
.fm-woo ul.products li.product .button:hover { box-shadow: inset 0 0 0 1px var(--fm-blue); }
.fm-woo ul.products[data-cols="3"] .product .price, .fm-woo ul.products[data-cols="3"] .product .woocommerce-Price-amount { font-size: 30px !important; }
.fm-woo ul.products[data-cols="4"] .product .price, .fm-woo ul.products[data-cols="4"] .product .woocommerce-Price-amount { font-size: 26px !important; }
.fm-woo ul.products[data-cols="4"] .woocommerce-loop-product__title { font-size: 17px !important; line-height: 30px; }

/* ---- the pager (listing/_pager.html) ---- */
.fm-foot { margin-top: 48px; text-align: center; }
.fm-woo nav.woocommerce-pagination ul.page-numbers { display: inline-flex; flex-wrap: wrap; margin: 0; padding: 0; border: 0; list-style: none; gap: 8px; }
.fm-woo nav.woocommerce-pagination ul.page-numbers li { border: 0; }
.fm-woo nav.woocommerce-pagination ul.page-numbers li .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid var(--fm-rule); font: 600 16px/1 var(--site-font-body, "Open Sans", sans-serif); color: var(--fm-ink); text-decoration: none; background: var(--fm-paper); }
.fm-woo nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover { border-color: var(--fm-blue); color: var(--fm-blue-ink); background: var(--fm-paper); }
.fm-woo nav.woocommerce-pagination ul.page-numbers li span.current { background: var(--fm-blue); border-color: var(--fm-blue); color: var(--fm-on-blue); }
.fm-woo nav.woocommerce-pagination ul.page-numbers li .dots { border-color: transparent; }
.fm-foot__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; font: 400 14px/1.5 var(--site-font-body, "Open Sans", sans-serif); color: var(--fm-grey); }
.fm-foot__per a { color: var(--fm-grey); }
.fm-foot__per a.is-picked { color: var(--fm-ink); font-weight: 700; text-decoration: none; }

/* ---- smaller screens: the client's own steps (991, 767, 544) ---- */
@media (max-width: 991px) {
  .fm-woo ul.products[data-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-woo ul.products[data-cols] .product .price, .fm-woo ul.products[data-cols] .product .woocommerce-Price-amount { font-size: 32px !important; }
}
@media (max-width: 979.98px) {
  .fm-bar__tools { width: 100%; }
  .fm-bar__tools .cl-bar__form { flex: 1 1 auto; min-width: 0; }
  .fm-bar .cl-bar__within, .fm-bar .cl-bar__sort { width: auto; flex: 1; min-width: 0; }
}
@media (max-width: 767px) {
  .fm-ls-main .cl-vb { margin-bottom: 32px; }
  .fm-ls .all-categories-archive, .fm-ls .all-categories-archive select { width: 100%; min-width: 0; }
  .fm-filter__cats { width: 100%; }
  .fm-woo ul.products li.product .woocommerce-loop-product__title { font-size: 18px !important; line-height: 30px; }
}
@media (max-width: 599.98px) {
  .fm-bar__tools .cl-bar__form { flex-wrap: wrap; }
  .fm-bar .cl-bar__within, .fm-bar .cl-bar__sort { flex: 1 1 100%; }
  .fm-bar__filter { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 544px) {
  .fm-woo ul.products[data-cols], .fm-woo ul.products { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fm-ls-main #breadcrumbs .separator { padding: 0 10px; }
  .fm-ls-main .df-page-title { font-size: 32px; margin-bottom: 0 !important; }
  .fm-title { padding-bottom: 24px; }
  .fm-subcat { padding: 6px 14px; font-size: 14px; min-height: 40px; }
  .fm-search { flex-direction: column; }
}

/* ---- /shop-by-category (shop-by-category.html): the kit's tiles in the client's card look ---- */
.fm-cat { margin-bottom: 96px; }
.fm-cat .cl-card { background: var(--fm-paper); box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; }
.fm-cat .cl-card__media { background: #fff; }
.fm-cat .cl-card__title { font: 700 18px/1.4 var(--site-font-body, "Open Sans", sans-serif); color: var(--fm-ink); }
.fm-cat .cl-pd__h2 { font: 800 32px/1.2 var(--site-font-body, "Open Sans", sans-serif); text-transform: uppercase; color: var(--fm-ink); }
.fm-cat .cl-cat__subs a { color: var(--fm-blue-ink); }

/* the region: the client's .container sets the gutters, the vehicle band's margin the space above */
.fm-ls-main .cl-ls-region { max-width: none; padding: 0; }