/* Remove from custom CSS when GMV-4054 is released */
/* MUST include */
@media (max-width: 768px) {
  .search-listing-module.search-based-v-page.has-browse-options .search-listing-header {
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .search-listing-module.search-based-v-page.has-browse-options .search-listing-header {
    align-items: flex-start;
    flex-direction: column-reverse;
  }

  .search-listing-module .search-listing-header .view-options-section {
    align-self: flex-start;
    margin-left: 0;
  }
}
/* End of GMV-4054 temp styles - End of MUST include */

/* START NEW SEARCH PAGE CSS */

/* Custom CSS Properties scoped to new search UI: */
.search-based-v-page {
  /* ===== Semantic Colors ===== */
  --color-primary: rgb(242, 97, 71);

  /* ===== Button Colors ===== */
  /* Base colors for use in gradients or solid backgrounds */
  --color-button-primary-bg-base: var(--color-primary);
  --color-button-primary-light-bg-base: var(--color-primary);
  --color-button-error-bg-base: #E0B34C;
  --color-button-warning-bg-base: #E0B34C;
  --color-button-disabled-bg-base: #CFCFCF;

  --color-button-primary-bg: var(--color-button-primary-bg-base);
  --color-button-primary-bg-hover: #f58a77;
  --color-button-primary-text: #fff;

  --color-button-primary-light-bg: var(--color-button-primary-bg-base);
  --color-button-primary-light-bg-hover: #f58a77;
  --color-button-primary-light-text: #fff;

  --color-button-error-bg: var(--color-button-warning-bg-base);
  --color-button-error-bg-hover: var(--color-button-warning-bg-base);
  --color-button-error-text: var(--color-text-body);

  --color-button-warning-bg: var(--color-button-warning-bg-base);
  --color-button-warning-bg-hover: var(--color-button-warning-bg-base);
  --color-button-warning-text: var(--color-text-body);

  --color-button-disabled-bg: var(--color-button-disabled-bg-base);
  --color-button-disabled-bg-hover: var(--color-button-disabled-bg-base);
  --color-button-disabled-text: var(--color-text-muted);
}

:root {
  --color-orange: rgb(242, 97, 71);
  --color-orange-hover: #f58a77;
}

/* ================= */
/* ===== LINKS ===== */
/* ================= */

/* base link hover state */
.search-based-v-page a:hover {
  color: #1d4b8f;
  text-decoration: none;
}


/* =================== */
/* ===== BUTTONS ===== */
/* =================== */

/* Main CTA button */
.search-based-v-page .action-button,
.search-based-v-page .call-to-action-button {
  transition: none !important;
}

/* Main CTA button hover state */
.search-based-v-page .action-button:hover {}

/* Main CTA button after pseudo element (has an arrow that we don't want) */
.search-based-v-page .action-button:after {
  display: none;
}


/* ========================= */
/* ===== PRODUCT TILES ===== */
/* ========================= */

/* product tile wrapper */
.catalog-products-v2 .catalog-product-card {}

/* product title link */
.search-based-v-page .product-title a {}

/* Product title link hover state */
.search-based-v-page .title-link:hover {}

/* Add to cart button */
.search-based-v-page .action-button.place-order-button,
.search-based-v-page .call-to-action-button.place-order-button,
.search-based-v-page .action-button.state-view-details {
  transition: none;
  background: #38841a !important;
}

/* Add to cart button hover */
.search-based-v-page .action-button.place-order-button:hover,
.search-based-v-page .call-to-action-button.place-order-button:hover, 
.search-based-v-page .action-button.state-view-details:hover {
  background: #49aa22 !important;
}

/* Fitment text */
.catalog-products-v2 .catalog-product-card-fitment .fitment-text {
  color: var(--color-text-body);
}


/* ================== */
/* ===== FACETS ===== */
/* ================== */

/* Multi select facet wrapper */
.search-based-v-page .search-facets-module .facet-wrapper.multi-select-facet {}

/* Facet header */
.search-based-v-page .search-facets-module .facet-wrapper.multi-select-facet .facet-header {}

/* Facet title (label only) */
.search-based-v-page .search-facets-module .facet-wrapper.multi-select-facet .facet-header .facet-title {}

/* Before pseudo element for facet title */
.search-based-v-page.search-facets-module .facet-title::before {}

/* Before pseudo element for facet title */
.search-based-v-page.search-facets-module .facet-title::after {}

/* Facet/sub-facet dropdown arrow icon */
.search-based-v-page .search-facets-module .facet-wrapper.multi-select-facet li .nested-facet-arrow {}

/* Facet/sub-facet row */
.search-based-v-page .search-facets-module .facet-wrapper.multi-select-facet li {}

/* Facet/sub-facet row label */
.search-based-v-page .search-facets-module .facet-wrapper.multi-select-facet li input[type=checkbox] + label {}

/* Top-level facet arrow icon */
.search-based-v-page .search-facets-module .facet-wrapper.multi-select-facet .facet-header .facet-toggle-btn {}

/* Facet content container (dropdown with facets and sub facets) */
.search-based-v-page .search-facets-module .facet-wrapper.multi-select-facet .facet-content {}

/* Sub facet list/group */
.search-based-v-page .search-facets-module .facet-wrapper.multi-select-facet li .sub-facet-group li {}

/* Last facet wrapper in list */
.search-based-v-page .search-facets-module .facet-wrapper.multi-select-facet:last-child {}

/* Clear all facets button */
.search-based-v-page .clear-all-filters-btn {}


/* ================================================================== */
/* ===== PAGE VIEW OPTION TOGGLES (Categories|Products buttons) ===== */
/* ================================================================== */

/* Note that these are not scoped because they have been added to both v1 and v2 search UI */

/* Toggle button text and icon - hover and active state */
.view-options-section .view-option-toggle:hover .view-option-text,
.view-options-section .view-option-toggle.active .view-option-text,
.view-options-section .view-option-toggle:hover .view-option-icon,
.view-options-section .view-option-toggle.active .view-option-icon {}

/* button hover state */
.view-options-section .view-option-toggle:hover {}

/* base view option toggle button */
.view-options-section .view-option-toggle {
  color: var(--color-text-body) !important;
  transition: none;
}

/* base active option toggle button */
.view-options-section .view-option-toggle.active {}

/* base active option toggle button hover state */
.view-options-section .view-option-toggle.active:hover {}

/* base non-active option toggle button hover state */
.view-options-section .view-option-toggle:not(.active):hover {
  background: var(--color-button-primary-bg-hover);
}

/* All elements within an active toggle button */
.view-options-section .view-option-toggle.active * {
  color: #fff !important;
}

/* All elements within an active toggle button with hover state */
.view-options-section .view-option-toggle:hover * {
  color: #fff !important;
}


/* ===================== */
/* ===== GARAGE UI ===== */
/* ===================== */

/* Vehicle filter form container (no vehicle selected) */
.search-based-v-page .vehicle-filter-container {}

/* Selected vehicle name */
.selected-vehicle-tile .selected-vehicle-info .selected-vehicle-name {
  color: var(--color-primary);
}

/* Select vehicle modal trigger (i.e. change vehicle) */
.selected-vehicle-tile .select-vehicle-link .select-vehicle-text,
.selected-vehicle-tile .select-vehicle-link * {
  color: var(--color-text-body);
}

/* Select vehicle modal trigger hover state */
.selected-vehicle-tile .select-vehicle-link:hover .select-vehicle-text {}

/* left-side icon wrapper in garage flyout */
.selected-vehicle-tile .garage.flyout .car-selected .car-first-icon svg {
  color: #fff;
}

/* left-side svg in garage flyout */
.garage.flyout .car-first-icon svg {
  color: #000;
}

/* right-side close icon on selected car list item */
.selected-vehicle-tile .garage.flyout .car-selected .car-close-icon i {
  color: #fff;
}

/* Currently selected car list item in garage flyout */
.selected-vehicle-tile .garage.flyout .car-selected {
  background: var(--color-orange);
}

/* Less specific garage flyout links */
.selected-vehicle-tile .garage.flyout a {}

/* Less specific garage flyout links hover state */
.selected-vehicle-tile .garage.flyout a:hover {}

/* Garage flyout list links */
.selected-vehicle-tile .garage.flyout ul a:hover {
  background: transparent;
  color: var(--color-orange-hover);
}

/* Selected car label in garage flyout */
.selected-vehicle-tile .garage.flyout .car-selected .car-label {
  color: #fff;
}

/* Selected car label in garage flyout hover state */
.selected-vehicle-tile .garage.flyout .car-selected:hover .car-label {
  color: #fff;
}

/* List item labels in garage flyout */
.selected-vehicle-tile .garage.flyout ul a .car-label {
  color: var(--color-orange);
}

/* List item labels in garage flyout hover state */
.selected-vehicle-tile .garage.flyout ul a:hover .car-label {
  color: var(--color-orange-hover);
}

/* Add new vehicle button in garage flyout */
.selected-vehicle-tile .garage.flyout .add-new-vehicle {
  background: var(--color-orange);
  color: #fff;
}

/* Add new vehicle button in garage flyout hover state */
.selected-vehicle-tile .garage.flyout .add-new-vehicle:hover {
  background: var(--color-orange-hover);
  color: #fff;
}

/* Selected car list item hover state */
.selected-vehicle-tile .garage.flyout .car-selected:hover {
  background: var(--color-orange-hover);
}

/* END NEW SEARCH PAGE CSS */