/* =========================================================
   Inventory Archive — Base tokens & layout
   ========================================================= */
.inv-archive {
  --gap: 20px;
  --accent: #cf1e27;
  --border: #ddd;
  color: var(--off-black, #111);
}

/* =========================================================
   "Shop By Manufacturer" widget (/products/new/ only)
   ========================================================= */
.inv-shop-by-make {
  margin: 0 0 24px;
  padding: 18px 20px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.inv-shop-by-make__heading {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent, #cf1e27);
}

/* On phone widths the slider is hidden and the accordion (which has its
   own toggle/heading via the <summary>) takes over. Drop the duplicate
   h2 + collapse the bordered wrapper so the accordion sits flush. */
@media (max-width: 767px) {
  .inv-shop-by-make {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .inv-shop-by-make__heading {
    display: none;
  }
}

.inv-shop-by-make__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Desktop: stretch the grid to exactly --inv-sbm-cols columns (the PHP
   layer caps at 4) so 3 brands fill the row instead of leaving a hole. */
@media (min-width: 540px) {
  .inv-shop-by-make__grid {
    grid-template-columns: repeat(var(--inv-sbm-cols, 4), minmax(0, 1fr));
  }
}

.inv-shop-by-make__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  min-height: 90px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.inv-shop-by-make__tile:hover,
.inv-shop-by-make__tile:focus-visible {
  border-color: var(--accent, #cf1e27);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.inv-shop-by-make__tile.is-active {
  border-color: var(--accent, #cf1e27);
  border-width: 2px;
  cursor: default;
}

.inv-shop-by-make__tile img {
  max-height: 56px;
  max-width: 100%;
  object-fit: contain;
}

/* Text-only tile for manufacturers without a configured logo. */
.inv-shop-by-make__tile--text {
  color: var(--off-black, #111);
}

.inv-shop-by-make__tile--text:hover .inv-shop-by-make__name,
.inv-shop-by-make__tile--text:focus-visible .inv-shop-by-make__name {
  color: var(--accent, #cf1e27);
}

.inv-shop-by-make__name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
  transition: color 0.15s ease;
}

/* =========================================================
   Make × road-group pill shortcuts (/products/new/ only)
   ========================================================= */
.inv-pill-shortcuts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 8px;
  margin: 0 0 20px;
}

.inv-pill-shortcut {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  /* Override the parent theme's main/footer dotted underline on links */
  border-bottom: 1px solid var(--accent);
  transition: background-color 0.15s, color 0.15s;
}

.inv-pill-shortcut:hover,
.inv-pill-shortcut:focus-visible {
  background: var(--accent);
  color: #fff;
}

.inv-pill-shortcut.is-active {
  background: var(--accent);
  color: #fff;
  cursor: default;
}

/* =========================================================
   Results bar (count, sort, pagination)
   ========================================================= */
.inv-resultsbar {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 15px;
  margin: 0 0 30px;
}

.inv-results-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

/* Visually hidden labels (for sort/page controls) */
.inv-visually-hidden .inv-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.inv-count {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--accent);
}

.inv-results-controls select {
  border-radius: 5px;
  border: 1px solid var(--accent);
  font-size: 15px;
  padding: 8px 10px;
}

@media (min-width: 1025px) {
  .inv-results-controls select {
    font-size: 18px;
    padding: 8px 15px;
  }
}

/* Simple inline layout helper (used in results + bottom bar) */
.inv-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Buttons that are used in archive/empty states */
.inv-btn-primary {
  font-size: 17px;
  padding: 8px 10px;
}

.inv-btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.inv-btn-blank {
  background: transparent;
  color: var(--accent);
  border: 1px solid transparent;
}

/* =========================================================
   Grid
   ========================================================= */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-bottom: 20px;
}

@media (max-width: 1200px) {
  .inv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .inv-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Empty state
   ========================================================= */
.inv-empty {
  display: block;
  border: 2px dashed var(--accent);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  margin: 10px 0 30px;
}

.inv-empty[hidden] {
  display: none;
}

/* =========================================================
   Cards
   ========================================================= */
.inv-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease;
}

.inv-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.inv-card-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.inv-card-media {
  background: #f7f7f7;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  display: block;
  position: relative;
  margin: 0;
  border-radius: 0;
}

.inv-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tag pill — floats over the image (top-left). Flat light-grey pill
   with an exclamation-circle icon, kept readable on any photo via a
   soft drop-shadow. */
.inv-sale-ribbon {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.inv-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  background: #f4f4f5;
  color: #111;
  border: 1px solid #e4e4e7;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.inv-tag-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #4a4a4a;
}

.inv-tag-label {
  white-space: nowrap;
}

.inv-card-body {
  padding: 0;
}

.inv-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px;
  line-height: 1.3;
  color: #000;
}

.inv-meta {
  margin: 0;
}

.inv-meta--stack {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 4px;
}

.inv-meta--stack dt {
  font-size: 13px;
  font-weight: 700;
}

.inv-meta--stack dt::after {
  content: ':';
  margin-left: 2px;
}

.inv-meta--stack dd {
  font-size: 13px;
  margin: 0;
}

.inv-ctas {
  display: grid;
  gap: 12px;
  padding: 24px;
  padding-top: 0;
  margin-top: auto;
}

.inv-ctas .btn {
  justify-content: flex-start;
  font-size: 16px;
  padding: 12px 15px;
}

.inv-ctas .btn.btn--outline {
  border: 2px solid var(--accent);
  color: var(--accent);
  background: transparent;
}

.inv-ctas .btn.btn--outline:hover {
  background: var(--accent);
  color: #fff;
}

/* Icon sizing inside CTAs */
.inv-ctas .gb-shape svg {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -2px;
  fill: #fff;
}

/* =========================================================
   Bottom bar / pagination
   ========================================================= */
.inv-bottombar.inv-bottombar--stack {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 12px;
  padding: 10px 0;
}

.inv-results-controls--bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

#invNextPage[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* =========================================================
   Utilities
   ========================================================= */
.is-hidden {
  display: none !important;
}

.inv-archive--loading #invTop,
.inv-archive--loading #invGrid,
.inv-archive--loading #invBottomBar {
  visibility: hidden;
}

.no-strikethrough {
    text-decoration: none;
}

.age-message {
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 3px;
}

.age-message svg {
    width: 1.1em;
    height: 1.1em;
}

.customized-message {
    font-size: 15px;
    text-align: center;
    margin-bottom: 10px;
    font-style: italic;
}

.btn-group {
    display: flex;
    column-gap: 5px;
}

.btn-group .btn {
    flex-grow: 1;
}

.btn-alt {
    background: #333;
}

.btn-group .btn:hover {
    background: #000;
}
/* =========================================================
   SRP card title area + simplified CTA stack (mock-aligned)
   ========================================================= */

.inv-card-titles {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 14px 18px 18px;
}

.inv-card-titles:hover .inv-title {
  color: var(--accent);
}

.inv-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 4px;
}

.inv-card-titles .inv-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.25;
  color: #111;
  text-transform: none;
}

.inv-subtitle {
  display: block;
  font-size: 13px;
  color: #6b6b6b;
  font-weight: 500;
}

/* Mock-aligned CTA layout: View details (primary) + Get approved /
   Trade value (outlined, side-by-side). */
.inv-ctas--srp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 18px;
}

.inv-ctas--srp .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.inv-ctas--srp .inv-cta-primary,
.inv-ctas--srp .inv-cta-primary:hover,
.inv-ctas--srp .inv-cta-primary:focus-visible {
  background: var(--accent, #cf1e27);
  color: #fff;
  border: 1px solid var(--accent, #cf1e27);
  box-shadow: none;
}

.inv-ctas--srp .inv-cta-primary:hover,
.inv-ctas--srp .inv-cta-primary:focus-visible {
  background: #b51820;
  border-color: #b51820;
}

.inv-ctas--srp .inv-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.inv-ctas--srp .inv-cta-secondary,
.inv-ctas--srp .inv-cta-secondary:hover,
.inv-ctas--srp .inv-cta-secondary:focus-visible {
  background: #4a4a4a;
  color: #fff;
  border: 1px solid #4a4a4a;
  box-shadow: none;
  text-shadow: none;
}

.inv-ctas--srp .inv-cta-secondary:hover,
.inv-ctas--srp .inv-cta-secondary:focus-visible {
  background: #333;
  border-color: #333;
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Desktop sidebar layout (Sep 2026 faceted search)
   At >=1025px the SRP becomes a two-column layout like the client's comp
   (mintmotorcycles.com desktop): filter rail on the left, results on the
   right. The GB container holding both blocks becomes the grid, and
   .archive-filters is flattened with display:contents so the
   Shop-By-Manufacturer widget + brand pills (which render inside it on
   /products/new/) can span the full width while the form itself sits in
   the rail. Browsers without :has() keep the stacked layout. Mobile and
   tablet keep the accordion above the results, matching the client's
   mobile mockup.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > * {
    grid-column: 2;
    min-width: 0;
  }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .inv-breadcrumb,
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > nav {
    grid-column: 1 / -1;
  }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters {
    display: contents;
  }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-shop-by-make,
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-pill-shortcuts {
    grid-column: 1 / -1;
    min-width: 0;
  }
  /* Parks just below the sticky site header. --fps-sticky-top is that
     header's real height, measured by archive.js, so this no longer depends
     on a hardcoded 95px. */
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-filters {
    grid-column: 1;
    grid-row: span 12;
    position: sticky;
    top: calc(var(--fps-sticky-top, 95px) + 20px);
  }

  /* Rail-friendly single-column internals */
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-filters-toggle { font-size: 21px; }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-facets { grid-template-columns: 1fr; }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-refine-grid { grid-template-columns: 1fr; }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-filters-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-tally { text-align: center; margin-top: 9px; }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-filters-actions-btns {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-filters-actions-btns .btn { width: 100%; }

  /* With the rail taking ~360px, three-across cards get cramped — run the
     results two-across beside the sidebar at every desktop width. */
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) .inv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The AI search bar carries an inline `margin: -16px 0 16px` that tucked it
     up under the filter card in the old stacked layout. As the first element
     of the right column it just sits 16px above the sidebar, so drop the lift
     here (inline style => !important) and let the two columns start level.
     The stacked mobile layout keeps the original tuck. */
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > #bo-ai-search {
    margin-top: 0 !important;
  }

  /* Tighter vertical rhythm in the rail so the filters use the column
     efficiently — the horizontal (homepage) form keeps its roomier spacing. */
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-filters-toggle { margin-bottom: 14px; }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-facets { gap: 9px; }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-refine { margin-top: 12px; padding-bottom: 12px; }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-refine-grid { gap: 9px; }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-refine .inv-label { margin-bottom: 4px !important; }
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-filters-actions { margin-top: 12px; }

  /* Shorter fields in the rail — and a single uniform height, since the
     refine selects/inputs (46px) sat taller than the facet buttons (43px).
     Mouse-only territory; the phone/tablet form keeps full-size touch
     targets and the 16px text stays put (shrinking it would trigger iOS
     zoom-on-focus and cost legibility). */
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-combo-btn,
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-filters .inv-select,
  .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) > .archive-filters .inv-filters .inv-input {
    padding-top: 7px;
    padding-bottom: 7px;
    line-height: 1.3;
  }
}

/* The DPS PayCycle payment panel is injected into .dps-injected-price-card
   with its own fixed-width internals. Give our wrapper the same 18px inset
   the rest of the card content uses so the pill lines up with the title and
   CTAs instead of sitting flush against the card edge (very visible once the
   cards got wider at two-across). DPS's own markup is untouched. */
.inv-card .dps-injected-price-card {
  padding-left: 18px;
  padding-right: 18px;
}

/* ---------------------------------------------------------------------------
   Collapsible filter rail (desktop only)
   The rail squishes to a slim vertical strip so results get the full width.
   The strip stays sticky, so reopening never means scrolling back up, and it
   carries a badge with the number of filters still applied — otherwise a
   collapsed panel hides the fact that results are filtered at all.
   Phone/tablet keep their accordion and ignore all of this.
--------------------------------------------------------------------------- */

.inv-rail-strip,
.inv-rail-collapse { display: none; }

@media (min-width: 1025px) {
  /* NB: do NOT set position:relative on .inv-filters here to anchor the
     absolutely-positioned collapse button — an identical selector above
     already sets position:sticky (a positioned value, so it is a perfectly
     good containing block) and a later `relative` silently wins the cascade,
     killing the sticky rail and turning its top:115px into a 115px downward
     shove. */

  /* Room for the collapse control so the heading can't run under it. */
  .archive-filters .inv-filters-toggle { padding-right: 34px; }

  .inv-rail-collapse {
    position: absolute;
    top: 16px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: #f1f1f1;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    color: var(--accent, #cf1e27);
    cursor: pointer;
    line-height: 0;
  }
  .inv-rail-collapse:hover { background: var(--off-black, #1f211e); color: #fff; }
  .inv-rail-collapse:focus-visible { outline: 2px solid var(--accent, #cf1e27); outline-offset: 2px; }
  .inv-rail-collapse svg { width: 13px; height: 13px; }

  body.inv-rail-collapsed .archive-filters .inv-filters { display: none; }

  body.inv-rail-collapsed .inv-rail-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    grid-column: 1;
    grid-row: span 12;
    align-self: start;
    position: sticky;
    top: calc(var(--fps-sticky-top, 95px) + 20px);
    width: 46px;
    padding: 12px 0 14px;
    background: #fff;
    border: 2px solid var(--accent, #cf1e27);
    border-radius: 10px;
    color: var(--accent, #cf1e27);
    cursor: pointer;
    font: inherit;
  }
  body.inv-rail-collapsed .inv-rail-strip:hover { background: #fbf2f3; }
  body.inv-rail-collapsed .inv-rail-strip:focus-visible {
    outline: 2px solid var(--accent, #cf1e27);
    outline-offset: 2px;
  }
  .inv-rail-strip__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .inv-rail-strip__count {
    min-width: 20px;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--accent, #cf1e27);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
  }
  .inv-rail-strip__count:empty { display: none; }

  /* Narrow rail column, and the reclaimed width goes to a third card. */
  body.inv-rail-collapsed .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) {
    grid-template-columns: 46px minmax(0, 1fr);
  }
  body.inv-rail-collapsed .entry-content .gb-container:has(> .archive-filters):has(> .inv-archive) .inv-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Collapsing hides the pulsing Search button, so the strip has to carry the
   unapplied-changes cue itself — otherwise squishing the panel silently
   swallows the one signal that the results are stale. */
@media (min-width: 1025px) {
  body.inv-rail-collapsed.inv-filters-pending .inv-rail-strip {
    animation: fps-strip-pending 1.7s ease-in-out infinite;
  }
  @keyframes fps-strip-pending {
    0%, 100% { box-shadow: 0 0 0 0 rgba(207, 30, 39, 0.55); }
    50%      { box-shadow: 0 0 0 7px rgba(207, 30, 39, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    body.inv-rail-collapsed.inv-filters-pending .inv-rail-strip {
      animation: none;
      outline: 3px solid var(--off-black, #1f211e);
      outline-offset: 2px;
    }
  }
}