/* The shop pages in the client's look: the Products hub (the theme's own
   .collection-landing styles, only the grey page here) and the category
   layout of its Celebros listings (crumbs, words, count, the filter box,
   the toolbar, the card grid and the pager), measured from their category
   page, since the Celebros stylesheet is not the theme's. The tokens first. */
:root {
  --amc-page: #f2f2f2;
  --amc-card: #fff;
  --amc-ink: #272727;
  --amc-title: #333;
  --amc-muted: #747474;
  --amc-answer: #494949;
  --amc-rule: #ddd;
  --amc-line: #e1e1e1;
  --amc-link: #006bb4;
  --amc-price: #ca1137;
  --amc-blue: #0170a8;
  --amc-gold: #fecb17;
  --amc-font: proxima-nova, sans-serif;
  --amc-radius: 2px;
}

body.amc-parts-page, body.amc-hub-page { background: var(--amc-page); }
.amc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- the hub ---- */
.amc-hub-status { font: 500 14px/21px var(--amc-font); color: var(--amc-ink); }

/* ---- the crumbs ---- */
.amc-parts-page .breadcrumbs { box-sizing: border-box; max-width: 1280px; margin: 30px auto 0; padding: 0 20px; font: 500 12px/18px var(--amc-font); }
.amc-parts-page .breadcrumbs .items { margin: 0; padding: 0; list-style: none; color: #707070; }
.amc-parts-page .breadcrumbs .item { display: inline-block; margin: 0; vertical-align: top; }
.amc-parts-page .breadcrumbs .item:not(:last-child)::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 16px 1px 14px; border-top: 1.5px solid #707070; border-right: 1.5px solid #707070; transform: rotate(45deg); }
.amc-parts-page .breadcrumbs a { color: var(--amc-link); text-decoration: none; }
.amc-parts-page .breadcrumbs a:hover { text-decoration: underline; }
.amc-parts-page .breadcrumbs strong { font-weight: 500; }

/* ---- the frame: words and count across, the vehicle and the filter box left, the grid right ---- */
.amc-parts { box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 18px 20px 60px; font: 500 14px/21px var(--amc-font); color: var(--amc-ink); }
.amc-shop { display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: 20px; grid-template-areas: "intro intro" "count count" "vehicle main" "filters main"; grid-template-rows: auto auto auto 1fr; }
.amc-shop > #np-category-page { display: contents; }
.amc-shop .page-title-wrapper, .amc-shop .category-view, .amc-shop .amc-brand-logo { grid-column: 1 / -1; }
.amc-vehicle { grid-area: vehicle; min-width: 0; margin-bottom: 20px; }
.amc-vehicle:empty { display: none; }
/* the vehicle picker (partials/ymm.html, a bar elsewhere) stacked to the filter box's width */
.amc-vehicle .ymm.installation-filter { margin: 0; padding: 15px; }
.amc-vehicle .ymm .mmy-filter-container { margin: 0; }
.amc-vehicle .ymm h3 { margin: 0 0 10px; }
.amc-vehicle .ymm .mmy-filter { flex-direction: column; gap: 10px; }
.amc-vehicle .ymm .mmy-filter .select-container { flex: none; width: 100%; margin: 0; }
.amc-vehicle .ymm select.mmy-dropdown { margin: 0; }
.amc-vehicle .ymm__actions { margin-top: 15px; gap: 10px; flex-wrap: nowrap; }
.amc-vehicle .ymm .btn { flex: 1 1 0; margin: 0; padding: 8px 10px; text-align: center; }
#filter-details { grid-area: count; padding: 5px 5px 5px 5px; }
#products-count { font: 500 14px/21px var(--amc-font); color: var(--amc-ink); }
#filter-title { margin-right: 8px; }
#filter-content { grid-area: filters; min-width: 0; }
#main-content { grid-area: main; min-width: 0; align-self: start; }
.category-description { margin: 0 0 25px; padding: 10px; font: 500 14px/21px var(--amc-font); color: var(--amc-ink); }
.amc-brand-logo { margin: 0 0 20px; padding: 10px; }
.amc-brand-logo img { display: block; max-height: 80px; max-width: 320px; }

/* ---- the filter box: the client's questions ---- */
#filters { background: var(--amc-card); box-shadow: rgba(0, 0, 0, .25) 0 0 10px -2px; padding: 15px; }
#filters::details-content { content-visibility: visible; block-size: auto; }
@supports selector(::details-content) { #filters > .npc-filters-toggle { display: none; } }
#filters > .npc-filters-toggle { list-style: none; cursor: pointer; font: 600 16px/24px var(--amc-font); text-transform: uppercase; }
#filters > .npc-filters-toggle::-webkit-details-marker { display: none; }
.amc-question { margin: 0 0 15px; }
.amc-question:last-child { margin-bottom: 0; }
.amc-question .question-title { margin: 0; padding: 0 0 10px; border-bottom: 1px solid var(--amc-rule); font: 600 16px/24px var(--amc-font); color: #000; text-transform: uppercase; letter-spacing: normal; }
.amc-question .answers { margin: 0; padding: 10px 0 0; list-style: none; }
.amc-question .answer { margin: 0; padding: 0; }
.amc-question .answer > a { display: flex; align-items: center; gap: 0; padding: 5px 5px 5px 10px; color: var(--amc-answer); text-decoration: none; font: 500 14px/21px var(--amc-font); }
.amc-question .no-check .answer > a { padding-left: 15px; }
.amc-question .answer > a:hover .nps-facet-name, .amc-question .answer > a:hover.amc-rail-link { color: var(--amc-link); }
.amc-question .answer > a.is-active { font-weight: 700; color: #000; }
.amc-question .nps-facet-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amc-rail-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amc-question .answer-products-count { flex: none; margin-left: 6px; color: var(--amc-muted); }
.amc-question .nps-box { flex: none; box-sizing: border-box; width: 13px; height: 13px; margin: 0 12px 0 0; border: 1px solid #333; background: #fff; }
.amc-question .nps-facet.is-active .nps-box { background: #333; box-shadow: inset 0 0 0 2px #fff; }
.amc-question .nps-more-toggle { position: absolute; opacity: 0; pointer-events: none; }
.amc-question .nps-facet-extra { display: none; }
.amc-question .nps-more-toggle:checked + .answers .nps-facet-extra { display: list-item; }
.amc-question .nps-more { display: block; margin: 4px 5px 0 0; text-align: right; color: var(--amc-price); cursor: pointer; font: 500 14px/21px var(--amc-font); }
.amc-question .nps-more:hover { text-decoration: underline; }
.amc-question .nps-more-hide, .amc-question .nps-more-toggle:checked ~ .nps-more .nps-more-show { display: none; }
.amc-question .nps-more-toggle:checked ~ .nps-more .nps-more-hide { display: inline; }
.amc-question .nps-more-toggle:focus-visible ~ .nps-more { outline: 2px solid var(--amc-link); }

/* ---- the picks over the grid ---- */
#filter-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 15px; }
#filter-breadcrumbs .filter-by { font-weight: 700; }
#filter-breadcrumbs .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
#filter-breadcrumbs .nps-chip { display: inline-flex; gap: 4px; align-items: center; padding: 4px 10px; background: #fff; border: 1px solid var(--amc-line); border-radius: var(--amc-radius); color: var(--amc-ink); text-decoration: none; font-size: 13px; line-height: 18px; }
#filter-breadcrumbs .nps-chip-x { margin-left: 4px; color: var(--amc-price); font-size: 16px; }
#clear-all a { color: var(--amc-price); text-decoration: none; font-weight: 600; }
#clear-all a:hover, #filter-breadcrumbs .nps-chip:hover .nps-chip-name { text-decoration: underline; }
.nps-finish { margin: 0 0 15px; }
.nps-finish-title { margin: 0 0 8px; font: 600 16px/24px var(--amc-font); text-transform: uppercase; color: #000; }
.nps-finish-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nps-finish .nps-chip { display: inline-block; padding: 4px 10px; background: #fff; border: 1px solid var(--amc-line); color: var(--amc-link); text-decoration: none; }
.npc-lead, .nps-outcome { margin: 0 0 15px; font: 500 14px/21px var(--amc-font); color: var(--amc-ink); }
.npc-lead a, .nps-outcome a { color: var(--amc-link); }
.nps-outcome--warn { color: var(--amc-price); }

/* ---- the toolbar: our filter box and In stock left, the client's sort right ---- */
.amc-parts .toolbar.nps-bar { margin: 0; }
.nps-sort { display: flex; align-items: center; gap: 15px; margin: 0; }
.nps-sort .nps-filter { box-sizing: border-box; width: 200px; height: 40px; padding: 0 12px; background: #fff; border: 1px solid var(--amc-line); border-radius: var(--amc-radius); font: 500 12px/18px var(--amc-font); color: var(--amc-ink); }
.nps-stock { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/18px var(--amc-font); text-transform: uppercase; color: #555; cursor: pointer; white-space: nowrap; }
.nps-sort-apply { height: 40px; padding: 0 14px; background: var(--amc-gold); border: 0; font: 700 12px/18px var(--amc-font); text-transform: uppercase; cursor: pointer; }
.nps-sort-apply[hidden] { display: none; }
#sorting { margin-left: auto; }
.nps-sort-select { box-sizing: border-box; width: 200px; height: 40px; padding: 0 30px 0 16px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px top 14px; border: 1px solid var(--amc-line); border-radius: var(--amc-radius); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(204, 204, 204, .3); appearance: none; -webkit-appearance: none; font: 500 12px/18px var(--amc-font); text-transform: uppercase; color: #555; cursor: pointer; }

/* ---- the grid and the card (parts/_card.html: li.cuit_item) ---- */
.products-grid.npp-list, .amc-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.products-grid.npp-list[aria-busy="true"] { opacity: .6; }
li.cuit_item { box-sizing: border-box; display: flex; margin: 0; padding: 15px 15px 15px 0; list-style: none; }
.cuit_item_container { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; padding: 15px; background: var(--amc-card); text-align: center; font-family: var(--amc-font); }
.cuit_item .product-details { display: block; color: var(--amc-title); text-decoration: none; transition: color .1s linear; }
.cuit_item a.product-details:hover { color: var(--amc-gold); text-decoration: underline; }
.cuit_item .product-image { display: flex; align-items: flex-start; justify-content: center; height: 246px; }
.cuit_item .product-image img { display: block; width: auto; height: auto; max-width: 100%; max-height: 240px; object-fit: contain; }
.cuit_item .product-title { margin: 15px 0 0; font: 700 14px/21px var(--amc-font); text-transform: uppercase; overflow-wrap: anywhere; }
.cuit_item .product-sku { display: block; margin: 5px 0 0; font: 500 12px/18px var(--amc-font); color: var(--amc-muted); }
.cuit_item .product-fits { display: block; margin: 2px 0 0; font: 500 12px/18px var(--amc-font); color: #2e7d32; }
.cuit_item .product-shop { padding: 10px 0 6px; }
.cuit_item .product-price { font: 700 14px/21px var(--amc-font); color: var(--amc-price); }
.cuit_item .old-product-price { display: block; font: 500 12px/18px var(--amc-font); color: var(--amc-muted); }
.cuit_item .add-to-cart { margin-top: auto; padding-top: 2px; min-height: 30px; opacity: 0; transition: opacity .15s linear; }
.cuit_item:hover .add-to-cart, .cuit_item:focus-within .add-to-cart { opacity: 1; }
@media (hover: none) { .cuit_item .add-to-cart { opacity: 1; } }
.cuit_item .add-to-cart form { margin: 0; }
.cuit_item .amc-tocart { display: inline-block; box-sizing: border-box; min-width: 140px; height: 30px; padding: 0 16px; background: var(--amc-gold); border: 0; border-radius: 0; color: #000; font: 700 12px/30px var(--amc-font); text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; }
.cuit_item .amc-tocart span { font: inherit; }
.cuit_item .amc-tocart:hover { background: #000; color: var(--amc-gold); }

/* ---- the pager ---- */
.toolbar-bottom { display: flex; }
#pagination ul { display: flex; align-items: center; gap: 0; margin: 10px 0; padding: 0; list-style: none; }
#pagination li { margin: 0 4px 0 0; font: 700 12px/18px var(--amc-font); }
#pagination li > span, #pagination li > a { display: block; padding: 3px 8px; color: var(--amc-link); text-decoration: none; }
#pagination li.selected > span { background: #e5e5e5; color: var(--amc-title); }
#pagination li > a:hover { text-decoration: underline; }
#pagination .nextPage > a, #pagination .prevPage > a { box-sizing: border-box; width: 34px; height: 32px; margin-left: 8px; padding: 0; border: 1px solid #ccc; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(204, 204, 204, .3); display: flex; align-items: center; justify-content: center; }
#pagination .prevPage > a { margin: 0 8px 0 0; }
.amc-arrow { display: block; width: 7px; height: 7px; margin-left: -3px; border-top: 2px solid #333; border-right: 2px solid #333; transform: rotate(45deg); }
.amc-arrow--left { margin: 0 -3px 0 0; transform: rotate(-135deg); }

/* ---- under 1000px: two columns of cards ---- */
@media (max-width: 999px) {
  .products-grid.npp-list, .amc-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- a phone: one column, the filter box behind the blue Filters button, cards two across ---- */
@media (max-width: 767px) {
  .amc-parts-page .breadcrumbs { margin-top: 24px; padding: 0 15px; font-size: 13px; }
  .amc-parts { padding: 14px 15px 40px; }
  .amc-shop { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "count" "vehicle" "filters" "main"; grid-template-rows: none; }
  #filter-details { padding: 5px; margin-bottom: 15px; }
  #filter-content { margin-bottom: 0; }
  #filters { background: none; box-shadow: none; padding: 0; }
  #filters > .npc-filters-toggle { display: flex !important; align-items: center; gap: 6px; width: max-content; margin: 0 10px 0 auto; padding: 5px 10px; background: var(--amc-blue); color: #fff; font: 500 14px/21px var(--amc-font); text-transform: none; }
  #filters > .npc-filters-toggle::before { content: ""; width: 6px; height: 6px; margin: -3px 2px 0 0; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
  #filters::details-content { content-visibility: hidden; block-size: 0; }
  #filters[open]::details-content { content-visibility: visible; block-size: auto; }
  #filters[open] > .npc-filters-body { margin-top: 10px; padding: 15px; background: var(--amc-card); box-shadow: rgba(0, 0, 0, .25) 0 0 10px -2px; }
  #main-content { margin-top: 15px; }
  .nps-sort { flex-wrap: wrap; gap: 10px; }
  #sorting { order: -1; margin: 0 auto 0 0; flex-basis: 100%; }
  .nps-sort-select { width: 170px; }
  .nps-sort .nps-filter { width: 100%; max-width: 360px; }
  li.cuit_item { padding: 15px; }
  .cuit_item .product-image { height: 126px; }
  .cuit_item .product-image img { max-height: 120px; }
  .cuit_item .amc-tocart { min-width: 0; width: 100%; padding: 0 6px; }
}

/* the hub: the vehicle picker under the title, clear of the tiles */
.amc-hub-vehicle { margin-bottom: 30px; }