/** Shopify CDN: Minification failed

Line 13:23 Unexpected ")"
Line 18:23 Unexpected ")"
Line 24:23 Unexpected ")"
Line 26:23 Unexpected ")"

**/
body {
  background: var(--tsl-bg);
}.shopify-section:has(.ts-collection-inventory) .section-background {
  background: var(--tsl-bg) !important;
}[aria-expanded='true']))), [aria-expanded='true']))) :is(.header-section, .header, .header__row, .header__columns, .header__underlay, .header__underlay-closed, .header__underlay-open) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}[aria-expanded='true']))), [aria-expanded='true']))) .header__row {
  --color-foreground: 255 255 255;
  --color-foreground-rgb: 255 255 255;
  --color-foreground-heading: 255 255 255;
  --color-background: transparent;
  color: #fff !important;
}[aria-expanded='true']))) :is(a, button, span, li, .header-actions__action, .menu-list__link, .menu-list__link-title, .header-menu a, .jdm-header-login, .jdm-header-social__link, .localization-form__select) {
  color: #fff !important;
}[aria-expanded='true']))) svg {
  color: #fff !important;
}

/* The mobile hamburger has BOTH color and stroke pinned to dark ink by
   ts-home-light.css (.header-drawer-icon path { color/stroke: var(--tsl-ink) }), [aria-expanded='true']))) :is(.header__icon--menu, .header__icon--summary, .header-drawer-icon) :is(svg, path) {
  color: #fff !important;
  stroke: #fff !important;
}[aria-expanded='true']))) {
  --header-logo-display: block;
  --header-logo-inverse-display: none;
}[aria-expanded='true']))) .header-logo:has(.header-logo__img--light) .header-logo__img:not(.header-logo__img--light) {
  display: none !important;
}[aria-expanded='true']))) .header-logo__img--light {
  display: block !important;
}button, span, li, .menu-list__link, .menu-list__link-title, .mega-menu__link {
  color: var(--dropdown-row-color, #141310) !important;
}.menu-list__link):is(:hover, :focus-visible), .menu-list__link):hover :is(.menu-list__link-title {
  color: var(--dropdown-row-hover-color, var(--ts-red)) !important;
}

/* ==========================================================================
   2-4. INVENTORY LAYOUT — single column stack:
        [filter bar] -> [results row] -> [grid]
   Override the dark sidebar+grid layout (display:grid) with a flex column,
   then re-order the children. Grid-placement !important rules on the children
   become inert under flex.
   ========================================================================== */
.ts-collection-inventory.collection-wrapper {
  display: flex !important;
  flex-direction: column !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  background: var(--tsl-bg);
  padding-inline: var(--page-inset) !important;
}

.ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) {
  order: 1;
}

.ts-collection-inventory .facets-controls-wrapper.facets--horizontal {
  order: 2;
}

.ts-collection-inventory .facets-toggle {
  order: 2;
}

.ts-collection-inventory .main-collection-grid {
  order: 3;
}

/* Hide the desktop "hide filters" expander — irrelevant in a horizontal bar. */
.ts-collection-inventory .ts-collection-hide-filters {
  display: none !important;
}

/* ----- 2. Horizontal filter bar (desktop) ----- */
@media screen and (min-width: 750px) {
  /* Hide the mobile Filters toggle; the inline bar takes over */
  .ts-collection-inventory .facets-toggle {
    display: none !important;
  }

  /* Outer band: full-width, top + bottom border only */
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) {
    background: var(--tsl-bg) !important;
    border: 0 !important;
    border-top: 1px solid var(--tsl-border) !important;
    border-bottom: 1px solid var(--tsl-border) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Kill sticky sidebar behaviour */
  .ts-collection-inventory .facets--vertical:not(.facets--drawer) {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Form wrapper + form: single horizontal row */
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .facets__form-wrapper,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .facets__form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Hide active-filter remove tags in the desktop bar — the dropdowns already
     show the active value, and Reset Filters clears them. The actual rendered
     wrapper is .facets-remove (snippets/filter-remove-buttons.liquid); the old
     .filter-remove-buttons selector matched nothing, so the pills leaked into
     the row and stacked as overlapping ovals on the far left. */
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .facets-remove,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .filter-remove-buttons {
    display: none !important;
  }

  /* Filter row */
  .ts-collection-inventory .facets__filters-wrapper {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Hide any non-custom filter leaking into the desktop bar */
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer)
    .facets__filters-wrapper > *:not(.ts-inventory-filter) {
    display: none !important;
  }

  /* Each filter column: full-height column, content bottom-aligned */
  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-right: 1px solid var(--tsl-border) !important;
    padding: 12px 20px !important;
  }

  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter:first-child {
    padding-left: clamp(16px, 2vw, 32px) !important;
  }

  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter:last-of-type {
    border-right: none !important;
  }

  /* Scoped control sizing: select gets a proper bordered box */
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__select {
    height: 42px !important;
    min-width: 110px !important;
    border: 1px solid var(--tsl-border) !important;
    border-radius: 4px !important;
    padding: 0 32px 0 12px !important;
    background-position: right 10px center !important;
  }

  /* Range group (Year, Price) gets same bordered box */
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range {
    height: 42px !important;
    border: 1px solid var(--tsl-border) !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
    gap: 0 !important;
    cursor: text !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  }

  /* Hover hints the box is interactive; focus shows it's actively typeable */
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range:hover {
    border-color: var(--tsl-ink-faint, #8a8a8a) !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range:focus-within {
    border-color: var(--tsl-ink, #141310) !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08) !important;
  }

  /* Range inputs inside the bordered group */
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range-input {
    min-width: 64px !important;
    width: 64px !important;
    height: 100% !important;
  }

  /* Separator gets breathing room */
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range-sep {
    padding: 0 6px !important;
  }
}

/* ----- Filter controls: shared skin (desktop bar + drawer) ----- */

/* Stacked layout: label above, control below */
.ts-collection-inventory .ts-inventory-filter--stacked {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

/* Small uppercase label — same for every filter */
.ts-collection-inventory .ts-inventory-filter__heading {
  display: block !important;
  color: var(--tsl-ink-soft) !important;
  font-family: var(--tsl-sans) !important;
  font-size: 0.69rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin-bottom: 8px !important;
}

.ts-collection-inventory .ts-inventory-filter__control {
  display: block !important;
  width: 100% !important;
}

/* Select: base (drawer + mobile) — no border, transparent */
.ts-collection-inventory .ts-inventory-filter__select {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: 1px solid var(--tsl-border) !important;
  border-radius: 4px !important;
  
  color: var(--tsl-ink) !important;
  font-family: var(--tsl-sans) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 0 32px 0 12px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px 12px !important;
}

.ts-collection-inventory .ts-inventory-filter__select:focus {
  
  border-color: var(--tsl-border-strong) !important;
}

.ts-collection-inventory .ts-inventory-filter__select option {
  background: var(--tsl-surface);
  color: var(--tsl-ink);
  text-transform: none;
}

/* Range group (Year + Price): base layout — border/height overridden for desktop bar above */
.ts-collection-inventory .ts-inventory-filter__range {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 1px solid var(--tsl-border) !important;
  border-radius: 4px !important;
  padding: 0 10px !important;
  gap: 0 !important;
  cursor: text !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Hover + focus affordance (mobile drawer / any non-desktop context) */
.ts-collection-inventory .ts-inventory-filter__range:hover {
  border-color: var(--tsl-ink-faint, #8a8a8a) !important;
}

.ts-collection-inventory .ts-inventory-filter__range:focus-within {
  border-color: var(--tsl-ink, #141310) !important;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08) !important;
}

/* Range text inputs */
.ts-collection-inventory .ts-inventory-filter__range-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  
  color: var(--tsl-ink) !important;
  caret-color: var(--tsl-ink, #141310) !important;
  cursor: text !important;
  font-family: var(--tsl-sans) !important;
  font-size: 0.82rem !important;
  padding: 0 !important;
  min-width: 64px !important;
  width: 64px !important;
  line-height: 1 !important;
}

.ts-collection-inventory .ts-inventory-filter__range-input::placeholder {
  color: var(--tsl-ink-faint) !important;
}

/* Separator — centred with even breathing room */
.ts-collection-inventory .ts-inventory-filter__range-sep {
  color: var(--tsl-ink-faint) !important;
  font-size: 0.82rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  padding: 0 6px !important;
}

/* Price filter: ensure the web component displays as block */
.ts-collection-inventory .ts-inventory-filter--price price-facet-component {
  display: block !important;
}

/* Price filter inputs — use the same .ts-inventory-filter__range-input rules as year */

/* Drawer price inputs — keep them clean too */
.ts-collection-inventory .facets--drawer .price-facet__input {
  background: transparent !important;
  border: none !important;
  
  color: var(--tsl-ink) !important;
  font-family: var(--tsl-sans) !important;
  font-size: 0.82rem !important;
  padding: 0 !important;
  width: 70px !important;
}

.ts-collection-inventory .facets--drawer .price-facet__input::placeholder {
  color: var(--tsl-ink-faint) !important;
}

/* Facet panels / inputs containers — strip the dark (#0d0d0d) surfaces so the
   Availability options and Sort disclosure blend into the cream bar. */
.ts-collection-inventory .facets__panel,
.ts-collection-inventory .facets__panel-content,
.ts-collection-inventory .facets__inputs,
.ts-collection-inventory .facets__inputs-wrapper,
.ts-collection-inventory .facets__inputs.facets__panel-content {
  background: transparent !important;
  color: var(--tsl-ink) !important;
}

/* Availability + checkbox labels */
.ts-collection-inventory .facets__inputs label,
.ts-collection-inventory .facets--vertical .facets__inputs label,
.ts-collection-inventory .facets--drawer .facets__inputs label {
  color: var(--tsl-ink) !important;
}

.ts-collection-inventory .facets--vertical input[type="checkbox"]:checked,
.ts-collection-inventory .facets--drawer input[type="checkbox"]:checked {
  accent-color: var(--tsl-accent);
}

/* Summary pills (sort "SORT BY", any list-filter summary) */
.ts-collection-inventory .facets__summary {
  background: var(--tsl-surface) !important;
  border: 1px solid var(--tsl-border-strong) !important;
  border-radius: 6px !important;
  color: var(--tsl-ink) !important;
}

.ts-collection-inventory .facets__summary:hover,
.ts-collection-inventory .facets__filters-wrapper .facets__summary:hover {
  border-color: var(--tsl-ink-faint) !important;
}

.ts-collection-inventory .facets__summary .icon-caret,
.ts-collection-inventory .facets__label {
  color: var(--tsl-ink) !important;
}

/* Sort floating panel popover light */
.ts-collection-inventory .sorting-filter__options {
  background-color: var(--tsl-surface) !important;
  color: var(--tsl-ink) !important;
  border: 1px solid var(--tsl-border) !important;
}

.ts-collection-inventory .sorting-filter__options-inner,
.ts-collection-inventory .sorting-filter__label {
  color: var(--tsl-ink) !important;
}

.ts-collection-inventory .sorting-filter__select {
  color: var(--tsl-ink) !important;
}

/* ----- 2b. Responsive: narrow screens — single row with Filters + Sort ----- */
@media screen and (max-width: 749px) {
  /* Show the mobile toggle, kill its own padding/height so our bar controls layout */
  .ts-collection-inventory .facets-toggle {
    display: block !important;
    padding: 0 !important;
    height: auto !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) {
    display: none !important;
  }

  /* Mobile bar: single flex row, two equal halves */
  .ts-collection-inventory .ts-collection-mobile-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
  }

  /* Inner row only holds the filters button — make it flex and take half the space */
  .ts-collection-inventory .ts-collection-mobile-bar__row {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: stretch !important;
  }

  /* Filters button wrapper fills the row */
  .ts-collection-inventory .ts-collection-mobile-bar .facets-toggle__wrapper {
    flex: 1 !important;
    display: flex !important;
  }

  /* The filters button itself */
  .ts-collection-inventory .ts-collection-mobile-bar__filters-btn {
    flex: 1 !important;
    height: 44px !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #d8d8d4 !important;
    border-radius: 4px !important;
    font-family: var(--tsl-sans) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #141310 !important;
    -webkit-text-fill-color: #141310 !important;
    padding: 0 12px !important;
    box-shadow: none !important;
    gap: 8px !important;
  }

  /* Hide the count — sort takes its visual slot */
  .ts-collection-inventory .ts-collection-mobile-bar__count {
    display: none !important;
  }

  /* Sort takes the other half — capped at 44px so it matches the filters button */
  .ts-collection-inventory .ts-collection-mobile-bar__sort {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 44px !important;
    display: flex !important;
    align-items: stretch !important;
  }

  .ts-collection-inventory .ts-collection-mobile-bar__sort facets-form-component,
  .ts-collection-inventory .ts-collection-mobile-bar__sort form,
  .ts-collection-inventory .ts-collection-mobile-bar__sort .sorting-filter-component,
  .ts-collection-inventory .ts-collection-mobile-bar__sort .sorting-filter {
    flex: 1 !important;
    height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Sorting container — strip all spacing and override the snippet's 180px min-width */
  .ts-collection-inventory .ts-collection-mobile-bar__sort .sorting-filter__container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 44px !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* Hide the "Sort by" label */
  .ts-collection-inventory .ts-collection-mobile-bar__sort .facets__label {
    display: none !important;
  }

  /* Select wrapper: exactly 44px tall, same box as filters button, no min-width */
  .ts-collection-inventory .ts-collection-mobile-bar__sort .sorting-filter__select-wrapper {
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    min-width: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid #d8d8d4 !important;
    border-radius: 4px !important;
    padding: 0 36px 0 12px !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* The sort select — explicit dark text, left-aligned, no native styling */
  .ts-collection-inventory .ts-collection-mobile-bar__sort .sorting-filter__select {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 1 !important;
    height: 100% !important;
    border: none !important;
    
    background: transparent !important;
    font-family: var(--tsl-sans) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #141310 !important;
    -webkit-text-fill-color: #141310 !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: left !important;
    text-align-last: left !important;
    text-overflow: ellipsis !important;
  }

  /* Caret: positioned inside the wrapper */
  .ts-collection-inventory .ts-collection-mobile-bar__sort .sorting-filter__select-wrapper svg {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    color: #141310 !important;
  }

  /* Suppress the accordion/radio version on mobile */
  .ts-collection-inventory .ts-collection-mobile-bar__sort accordion-custom {
    display: none !important;
  }

  /* Remove the top separator line the theme adds before sorting-filter */
  .ts-collection-inventory .ts-collection-mobile-bar__sort .sorting-filter::before {
    display: none !important;
  }
}

/* ----- 2c. Sort column in the filter bar ----- */
@media screen and (min-width: 750px) {
  /* Sort wrapper: pushed to the far right, same column style as filters */
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-collection-bar-sort {
    border-left: 1px solid var(--tsl-border) !important;
    border-right: none !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 12px 20px !important;
    padding-right: clamp(16px, 2vw, 32px) !important;
  }

  /* Sort select: same min-width as needed to fit "Newest first" */
  .ts-collection-inventory .ts-collection-bar-sort .ts-inventory-filter__select {
    min-width: 150px !important;
  }

  /* Hide the sort from the separate controls bar (keep the count row) */
  .ts-collection-inventory .facets-controls-wrapper.facets--horizontal .sorting-filter {
    display: none !important;
  }
}

/* ----- 3. Results row (count + sort) ----- */
.ts-collection-inventory .facets-controls-wrapper.facets--horizontal {
  border-top: 1px solid var(--tsl-border) !important;
  border-bottom: 1px solid var(--tsl-border) !important;
  padding-block: 14px !important;
  margin-bottom: clamp(18px, 2.5vw, 26px) !important;
}

.ts-collection-inventory .products-count-wrapper {
  color: var(--tsl-ink) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   4. PRODUCT GRID — light, ~5 columns, responsive
   ========================================================================== */
.ts-collection-inventory .product-grid,
.ts-collection-inventory .product-grid[data-product-card-size] {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (max-width: 1280px) {
  .ts-collection-inventory .product-grid,
  .ts-collection-inventory .product-grid[data-product-card-size] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  .ts-collection-inventory .product-grid,
  .ts-collection-inventory .product-grid[data-product-card-size] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ----- MOBILE (<=749px): premium single-column inventory -----
   One car per row so the hero photo reads large and cinematic, with a
   rounded, softly elevated card shell and a refined spec/price block. */
@media (max-width: 749px) {
  .ts-collection-inventory .product-grid,
  .ts-collection-inventory .product-grid[data-product-card-size] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }
}

/* ==========================================================================
   5. PAGINATION — light with red current page
   ========================================================================== */
.ts-collection-inventory .pagination__link {
  color: var(--tsl-ink) !important;
}

.ts-collection-inventory .pagination__link--current {
  color: #ffffff !important;
}

.ts-collection-inventory .pagination__link[aria-current="page"]::before,
.ts-collection-inventory .pagination__link--current::before {
  background: var(--tsl-accent) !important;
  opacity: 1 !important;
}

.ts-collection-inventory .pagination__list::before {
  background: rgba(17, 17, 17, 0.06) !important;
}

.ts-collection-inventory .pagination__link:not(.pagination__link--current):not(.pagination__link--gap):not(.pagination__link--disabled):hover::before {
  background: rgba(17, 17, 17, 0.06) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   7. MOBILE (<=749px) — Filters drawer + sort bar, light
   ========================================================================== */
@media (max-width: 749px) {
  /* Hide the inline desktop dropdown bar + desktop count/sort; use mobile bar. */
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) {
    display: none !important;
  }

  .ts-collection-inventory .facets-controls-wrapper.facets--horizontal {
    display: none !important;
  }

  .ts-collection-inventory .facets-toggle {
    display: block !important;
  }

  /* Mobile bar light */
  .ts-collection-inventory .ts-collection-mobile-bar {
    border-top: 1px solid var(--tsl-border);
    border-bottom: 1px solid var(--tsl-border);
  }

  .ts-collection-inventory .ts-collection-mobile-bar__count,
  .ts-collection-inventory .ts-collection-mobile-bar .products-count-wrapper {
    color: var(--tsl-ink) !important;
  }

  .ts-collection-inventory .ts-collection-mobile-bar__filters-btn {
    background: #ffffff !important;
    border: 1px solid #d8d8d4 !important;
    border-radius: 4px !important;
    color: #141310 !important;
    -webkit-text-fill-color: #141310 !important;
  }

  .ts-collection-inventory .ts-collection-mobile-bar__filters-btn .svg-wrapper svg {
    color: #141310 !important;
  }

  /* Sort select wrapper and select — force same appearance as filters button */
  .ts-collection-inventory .ts-collection-mobile-bar__sort .sorting-filter__select-wrapper {
    background-color: #ffffff !important;
    border: 1px solid #d8d8d4 !important;
    border-radius: 4px !important;
  }

  .ts-collection-inventory .ts-collection-mobile-bar__sort .sorting-filter__select {
    color: #141310 !important;
    -webkit-text-fill-color: #141310 !important;
    text-align: left !important;
    text-align-last: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  .ts-collection-inventory .ts-collection-mobile-bar__sort .sorting-filter__select-wrapper svg,
  .ts-collection-inventory .ts-collection-mobile-bar__sort .sorting-filter__select-wrapper svg path {
    color: #141310 !important;
    stroke: #141310 !important;
    fill: #141310 !important;
  }
}

/* Mobile filter DRAWER — force light regardless of its color scheme. The dark
   base paints #0d0d0d/#090909 on the dialog AND its inner wrappers, so reset
   the wrappers to transparent and let the light dialog surface show through. */
#filters-drawer.facets-block-wrapper--vertical,
#filters-drawer .facets--drawer {
  background: var(--tsl-bg) !important;
  color: var(--tsl-ink) !important;
}

#filters-drawer .facets__form-wrapper,
#filters-drawer .facets-drawer__form-wrapper,
#filters-drawer .facets__form,
#filters-drawer .facets-drawer__filters,
#filters-drawer .facets__title-wrapper,
#filters-drawer .facets-drawer__title,
#filters-drawer .facets-drawer__close,
#filters-drawer scroll-hint {
  background: transparent !important;
}

#filters-drawer .facets-drawer__title,
#filters-drawer .facets-drawer__close,
#filters-drawer .facets-drawer__close .svg-wrapper svg {
  color: var(--tsl-ink) !important;
}

#filters-drawer .facets__title-wrapper {
  border-bottom: 1px solid var(--tsl-border) !important;
}

#filters-drawer .facets__drawer-actions {
  background: var(--tsl-bg) !important;
  border-top: 1px solid var(--tsl-border) !important;
}

#filters-drawer .facets__see-results {
  background: var(--tsl-accent) !important;
  border-color: var(--tsl-accent) !important;
  color: #ffffff !important;
}

#filters-drawer .facets__see-results:hover {
  background: var(--tsl-accent-hover) !important;
  border-color: var(--tsl-accent-hover) !important;
}

#filters-drawer .facets__clear-all {
  color: var(--tsl-ink) !important;
  border-color: var(--tsl-border-strong) !important;
}

/* In the drawer the ordered dropdowns stack full width again. */
#filters-drawer .facets__filters-wrapper {
  flex-direction: column !important;
}

#filters-drawer .facets__filters-wrapper .ts-inventory-filter {
  width: 100% !important;
  min-width: 0 !important;
}

/* Drawer parity with the desktop bar: show ONLY the custom dropdowns and
   range boxes. Hide leaked native filters — e.g. the Availability
   "In stock / Out of stock" panel, which rendered as a shadowed box with
   oversized checkboxes that broke out of the drawer. */
#filters-drawer .facets__filters-wrapper > *:not(.ts-inventory-filter) {
  display: none !important;
}

/* Sort is already available in the collapsed mobile bar, so the Sort block
   inside the drawer is redundant and visually inconsistent (large serif
   heading). Hide it here — scoped to #filters-drawer so the mobile-bar sort
   (.ts-collection-mobile-bar__sort) is untouched. */
#filters-drawer .sorting-filter {
  display: none !important;
}

/* ==========================================================================
   Mobile filter drawer — cleaner, more premium layout
   Even vertical rhythm (single gap), comfortable padding, clearer inputs.
   ========================================================================== */

/* Header: refined uppercase title, generous padding, hairline divider */
#filters-drawer .facets__title-wrapper {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--tsl-border) !important;
}

#filters-drawer .facets-drawer__title {
  font-family: var(--tsl-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* Scroll area: consistent inner padding all round */
#filters-drawer .facets-drawer__filters {
  padding: 4px 24px 24px !important;
}

/* One source of vertical spacing: an even gap between filter groups.
   (Removes the uneven rhythm where Year/Price sat further apart.) */
#filters-drawer .facets__filters-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  padding-top: 20px !important;
}

/* Drop any leftover hairlines/separators — separation is whitespace only */
#filters-drawer .facets__item::before,
#filters-drawer .ts-inventory-filter::before {
  content: none !important;
  display: none !important;
}

/* Zero per-item box model so the wrapper gap is the only spacing */
#filters-drawer .facets__filters-wrapper .ts-inventory-filter {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Label sits close to its control */
#filters-drawer .ts-inventory-filter__heading {
  margin-bottom: 10px !important;
}

/* Inputs: full width, 46px touch target, clearer border + matching radius */
#filters-drawer .ts-inventory-filter__select,
#filters-drawer .ts-inventory-filter__range {
  width: 100% !important;
  height: 46px !important;
  border: 1px solid var(--tsl-border-strong, #d8d8d4) !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
}

#filters-drawer .ts-inventory-filter__select {
  padding: 0 38px 0 14px !important;
  background-position: right 14px center !important;
}

#filters-drawer .ts-inventory-filter__range {
  padding: 0 14px !important;
}

/* Bottom actions: balanced padding, taller tappable CTA, matching radius */
#filters-drawer .facets__drawer-actions {
  padding: 16px 24px 22px !important;
  gap: 12px !important;
}

#filters-drawer .facets__see-results,
#filters-drawer .facets__clear-all {
  height: 50px !important;
  border-radius: 6px !important;
  letter-spacing: 0.1em !important;
}

@media screen and (min-width: 750px) {
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) {
    background: var(--tsl-surface, #ffffff) !important;
    border: 1px solid var(--tsl-border, #e6e6e3) !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 34px rgba(17, 17, 17, 0.06) !important;
    margin: 0 0 18px !important;
    padding: 14px !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .facets__form-wrapper,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .facets__form {
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .ts-collection-inventory .facets__filters-wrapper {
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-collection-bar-sort {
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--tsl-bg, #f8f8f6) !important;
    padding: 10px 12px !important;
    min-height: 70px !important;
  }

  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter {
    flex: 1 1 150px !important;
  }

  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter:first-child {
    padding-left: 12px !important;
  }

  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter--year,
  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter--price {
    flex-basis: 180px !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-collection-bar-sort {
    margin-left: auto !important;
    flex: 0 0 172px !important;
    align-items: stretch !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__select,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range {
    height: 40px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--tsl-border-strong, #d8d8d4) !important;
    border-radius: 6px !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__select:hover,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range:hover {
    border-color: rgba(17, 17, 17, 0.35) !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__select:focus,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range:focus-within {
    border-color: var(--tsl-accent, var(--ts-red)) !important;
    box-shadow: 0 0 0 3px rgba(var(--ts-red-rgb), 0.09) !important;
  }
}

.ts-collection-inventory .ts-inventory-filter__heading,
.ts-collection-inventory .products-count-wrapper,
.ts-collection-inventory .sorting-filter__label {
  font-family: var(--tsl-sans, "Inter", system-ui, sans-serif) !important;
}

.ts-collection-inventory .ts-inventory-filter__heading {
  color: var(--tsl-ink, #141310) !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 8px !important;
}

.ts-collection-inventory .ts-inventory-filter__select,
.ts-collection-inventory .ts-inventory-filter__range-input,
.ts-collection-inventory .sorting-filter__select {
  font-family: var(--tsl-sans, "Inter", system-ui, sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
}

.ts-collection-inventory .facets-controls-wrapper.facets--horizontal {
  border: 0 !important;
  padding-block: 6px 0 !important;
}

.ts-collection-inventory .products-count-wrapper {
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

@media (max-width: 749px) {

  .ts-collection-inventory .ts-collection-mobile-bar {
    border: 1px solid var(--tsl-border, #e6e6e3) !important;
    border-radius: 8px !important;
    background: var(--tsl-surface, #ffffff) !important;
    margin: 0 0 16px !important;
    padding: 10px !important;
  }

  .ts-collection-inventory .ts-collection-mobile-bar__filters-btn,
  .ts-collection-inventory .ts-collection-mobile-bar__sort .sorting-filter__select-wrapper {
    background: var(--tsl-bg, #f8f8f6) !important;
    border-color: var(--tsl-border-strong, #d8d8d4) !important;
    border-radius: 6px !important;
  }
}

/* ==========================================================================
   Collection filters - glass pill refinement
   --------------------------------------------------------------------------
   Cleaner than the tiled toolbar: one calm row of translucent controls.
   ========================================================================== */

@media screen and (min-width: 750px) {
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 22px !important;
    padding: 16px 0 18px !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .facets__form-wrapper,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .facets__form {
    gap: 10px !important;
  }

  .ts-collection-inventory .facets__filters-wrapper {
    gap: 10px !important;
  }

  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-collection-bar-sort {
    position: relative !important;
    justify-content: flex-end !important;
    min-height: 58px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.58)) !important;
    border: 1px solid rgba(17, 17, 17, 0.1) !important;
    border-radius: 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 10px 24px rgba(17, 17, 17, 0.045) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
  }

  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter:hover,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-collection-bar-sort:hover {
    border-color: rgba(17, 17, 17, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 14px 30px rgba(17, 17, 17, 0.07) !important;
  }

  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter:focus-within,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-collection-bar-sort:focus-within {
    border-color: rgba(var(--ts-red-rgb), 0.55) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 0 0 3px rgba(var(--ts-red-rgb), 0.08),
      0 14px 30px rgba(17, 17, 17, 0.07) !important;
  }

  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter {
    flex: 1 1 152px !important;
  }

  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter--year,
  .ts-collection-inventory .facets__filters-wrapper .ts-inventory-filter--price {
    flex-basis: 184px !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-collection-bar-sort {
    flex: 0 0 164px !important;
    margin-left: auto !important;
  }

  .ts-collection-inventory .ts-inventory-filter__heading {
    position: absolute !important;
    top: 9px !important;
    left: 18px !important;
    z-index: 1 !important;
    margin: 0 !important;
    color: rgba(17, 17, 17, 0.58) !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }

  .ts-collection-inventory .ts-inventory-filter__control {
    height: 58px !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__select,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range {
    height: 58px !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__select {
    padding: 20px 42px 0 18px !important;
    background-position: right 18px center !important;
    color: var(--tsl-ink, #141310) !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range {
    align-items: flex-end !important;
    padding: 20px 18px 10px !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range:hover,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range:focus-within,
  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__select:focus {
    border: 0 !important;
    box-shadow: none !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range-input {
    height: 24px !important;
    min-width: 56px !important;
    width: 56px !important;
    color: var(--tsl-ink, #141310) !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range-input::placeholder {
    color: rgba(17, 17, 17, 0.52) !important;
  }

  .ts-collection-inventory .facets-block-wrapper--vertical:not(#filters-drawer) .ts-inventory-filter__range-sep {
    height: 24px !important;
    padding: 0 8px !important;
    color: rgba(17, 17, 17, 0.36) !important;
  }
}

/* Desktop collection grid - larger editorial cards, three per row */
@media screen and (min-width: 990px) {
  .ts-collection-inventory .product-grid,
  .ts-collection-inventory .product-grid[data-product-card-size] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(22px, 2.2vw, 32px) !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .ts-collection-inventory .product-grid,
  .ts-collection-inventory .product-grid[data-product-card-size] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }
}

/* Mobile collection hero + image-first cards */
@media screen and (max-width: 749px) {

  .ts-collection-inventory.collection-wrapper {
    padding-inline: 24px !important;
  }

  .ts-collection-inventory .ts-collection-mobile-bar {
    margin-bottom: 24px !important;
  }
}