/* 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: #134A9C;

  /* ===== 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: #0d346f;
  --color-button-primary-text: #fff;

  --color-button-primary-light-bg: var(--color-button-primary-bg-base);
  --color-button-primary-light-bg-hover: #0d346f;
  --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-darkBlue: #134A9C;
  --color-darkBlue-hover: #0d346f;
}

/* ================= */
/* ===== 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-darkBlue);
}

/* 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-darkBlue-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-darkBlue);
}

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

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

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

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

/* END NEW SEARCH PAGE CSS */

.vehicle-picker-module .browse_catalog:hover, .vehicle-picker-module .vpicker-submit:hover {
    background-color: #0d346f !important;
}

.home_seo {
    font-size: 15px;
}

/* Dropdown Button */
.dropbtn {
  background-color: #134A9C;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #1254b8;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  position: absolute;
  background-color: #f1f1f1;
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 51;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Add or remove this to hide or show */
.hide {display:none;}


/* Special Categories Title & Circles */
#scrolling-banner-custom {
    margin-bottom: 25px;
}

.circles-images-container .col-md-4 {
    float: left;
    width: 24.33333%!important;
}


#featured-custom h2 {
    margin-top: 25px;
}


/* GM Compliance */
.comp_name {
	font-size: 14px!important;
    font-weight: 700;
}

.dealer_info {
	margin-top: 1px!important;
}

.gm_logo_strip {
	width: 300px;
}

.acdelco_logo {
	width: 600px;
}

/* Styling for V- pages */

.oem-vehicle-picker-module #vehicle-data-lists {background-color: white; padding: 10%;
}