html.cm_no-scroll .js-overlay {
  visibility: visible;
  opacity: 1;
}

html:has(.cm_autocomplete.cm_dropdown.cm_hide) {}

html:has(.cm_autocomplete.cm_dropdown:not(.cm_hide)) {
  scroll-padding-top: 0;

  .js-search-overlay {
    visibility: visible;
    opacity: 1;
  }

  .js-search-overlay {
    visibility: visible;
    opacity: 1;
  }

  .cc-header--sticky {
    z-index: 32;
  }
}


/* Search Box Not Empty */
html:has(.cm_autocomplete.cm_dropdown:not(.cm_hide)) .cm_body,
.cm_body.cm_no-scroll {
  position: fixed;
  padding-right: var(--scrollbar-width);

  #cm_SearchBox {
    position: relative;
    z-index: 31;
  }
}

/* Header Widget */
.header__icons {
  #cm-garage {
    background: none;
  }


  .cm_garage {
    width: 100%;
    height: 100%;

    .garage-icon-container {
      width: 100%;
      height: 100%;

      /* Garage icon */
      .garage-icon.cm_icon_garage__background {
        display: block;
        position: relative;
        margin: auto;
        filter: none !important;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDIgMzAyIj4KICA8cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTI5NSA1OS44ODZIN2E3IDcgMCAwIDAtNyA3djE2OC4yMjlhNyA3IDAgMCAwIDcgN2gyNmE3IDcgMCAwIDAgNy03di0zNS4yMjloMzQuMzMzdjdjMCA5LjI0NiA2LjQyMiAxNy4wMDEgMTUuMDM0IDE5LjA5My43MjIgMy4wOTcgMy40OTQgNS40MDcgNi44MTEgNS40MDdoMTQuNWE3IDcgMCAwIDAgNi42NTQtNC44MzNoNjcuMzM2YTcgNyAwIDAgMCA2LjY1NCA0LjgzM2gxNC41YzMuMzE3IDAgNi4wODktMi4zMSA2LjgxMS01LjQwNyA4LjYxMi0yLjA5MSAxNS4wMzQtOS44NDcgMTUuMDM0LTE5LjA5M3YtN0gyNjJ2MzUuMjI5YTcgNyAwIDAgMCA3IDdoMjZhNyA3IDAgMCAwIDctN1Y2Ni44ODZhNyA3IDAgMCAwLTctN20tODEuMzMzIDE0N2E1LjY3MyA1LjY3MyAwIDAgMS01LjY2NyA1LjY2N0g5NGE1LjY3MyA1LjY3MyAwIDAgMS01LjY2Ny01LjY2N3YtN2gxMC4xMjRjLjU5NSAzLjEzMiAzLjM0MyA1LjUwMSA2LjY0OCA1LjUwMXM2LjA1My0yLjM2OSA2LjY0OS01LjUwMWg3OC40OTJjLjU5NiAzLjEzMiAzLjM0NCA1LjUwMSA2LjY0OSA1LjUwMXM2LjA1My0yLjM2OSA2LjY0OC01LjUwMWgxMC4xMjR6bTctMjFINDB2LTUuMzMzaDIyMnY1LjMzM3ptNDEuMzMzLTQ0djUuMzMzSDQwdi01LjMzM3ptMCAxOS4zMzN2NS4zMzNINDB2LTUuMzMzem0wLTM4LjY2NnY1LjMzM0g0MHYtNS4zMzN6bTAtMTRINDB2LTUuNjY3aDIyMnptMjYgMTE5LjU2MWgtMTJWOTUuODg2YTcgNyAwIDAgMC03LTdIMzNhNyA3IDAgMCAwLTcgN3YxMzIuMjI5SDE0VjczLjg4NmgyNzR6Ii8+Cjwvc3ZnPg==) !important;
        background-position-x: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        background-size: contain;
      }

      .garage-size {
        transition: opacity .25s ease-in-out;
        opacity: 1;
        position: absolute;
        text-align: center;
        box-shadow: none;
        right: -11px;
        top: -8px;

        @media (min-width: 1024px) {
          right: -9px;
          top: -6px;
        }
      }

      @starting-style {
        .garage-size {
          opacity: 0;
        }
      }
    }

    .cm_garageDropdown {
      z-index: 10;
      color: rgb(var(--text-color));
      background: rgba(var(--bg-color));
      border: 1px solid rgba(var(--text-color) / .25);
      border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
      touch-action: manipulation;
      padding: 2rem;
      display: flex;
      flex-flow: column;
      transition: transform .6s cubic-bezier(.75, 0, .175, 1), visibility .6s cubic-bezier(.75, 0, .175, 1);
      position: fixed;

      &:not(.cm_hide) {
        visibility: visible;
      }

      &.cm_hide {
        display: block !important;
        visibility: hidden;
      }

      &:before {
        content: 'My Garage' !important;
        color: rgb(var(--heading-color));
        font-family: var(--heading-font-family);
        font-style: var(--heading-font-style);
        font-weight: var(--heading-font-weight);
        font-size: var(--h6-font-size);
        line-height: 1;
        text-transform: var(--heading-text-transform);
        position: relative;
        top: unset;
        left: unset;
        right: unset;
        bottom: unset;
        width: auto;
        height: auto;
        border: none;
      }

      .cmTemplate_empty {
        &:before {
          content: 'Add vehicles and filter your searches by your selected vehicles.';
          position: relative;
        }
      }

      .cmTemplate_list {
        &:before {
          content: "Showing you parts for your selected vehicles.";
          position: relative;
        }
      }

      .garage-content {
        margin-top: 1.75rem;
        flex-direction: unset;
        flex-wrap: wrap;

        .add-vehicle,
        .clear-garage {
          flex: 0 0 auto;
        }

        .add-vehicle {
          order: 1;
          align-self: start;
          cursor: pointer;
        }

        .clear-garage {
          order: 2;
          margin-left: auto;
          padding-left: 2rem;
          text-decoration: underline;
          text-transform: capitalize;
          /* border: 1px solid;
          padding: 0.3rem 0.95rem;
          border-radius: 0.6rem; */

          &:hover {
            color: rgb(var(--text-color) / 0.7)
          }
        }

        .cmRepeater_items {
          order: 0;
          flex: 1 1 100%;
          margin-top: 0;
          display: flex;
          flex-flow: column;
          gap: 1rem
        }

        .garage-item {
          color: rgba(var(--text-color) / 1);
          margin: 0;
          padding-bottom: 1rem;
          border-bottom: 1px solid rgba(var(--text-color) / 0.15);

          &:last-of-type {
            border-bottom: unset;
          }

          span.select-model {
            &:hover {
              color: rgba(var(--text-color) / 0.7);
            }
          }

          span.remove-model {
            position: relative;
            width: 2.5rem;
            height: auto;

            svg.cm_icon,
            &:before {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }

            &:before {
              content: "";
              transition: .15s ease-in-out;
              width: 2.5rem;
              height: 2.5rem;
              border-radius: 50%;
              position: absolute;
              background-color: rgb(var(--text-color)/ 0.2);
            }

            svg.cm_icon {
              fill: currentColor;
              stroke: currentColor;
            }

            &:hover {
              svg.cm_icon {
                fill: rgb(var(--bg-color));
                stroke: rgb(var(--bg-color));
              }

              &:before {
                background-color: rgb(var(--text-color)/1);
              }
            }
          }
        }

        ul:has(> li.vehicle-advantages) {
          display: none;
        }

      }
    }

    @media (max-width: 767px) {
      .cm_garageDropdown {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 75vh;
        bottom: 0;
        left: 0;
        right: 0 !important;
        top: unset !important;

        &:not(.cm_hide) {
          transform: translateY(0);
        }

        &.cm_hide {
          transform: translateY(100%);
        }
      }
    }

    @media screen and (min-width: 576px) {
      .cm_garageDropdown {
        position: absolute;
        padding: 2rem;
        border-radius: 1.5rem;
        bottom: unset;
        left: unset;
        right: calc((var(--button-width) / 2 - 1rem) * -1);
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: .25s ease-in-out;

        width: 525px;
        max-width: 525px;

        &:after {
          content: "";
          border-style: solid;
          border-color: transparent transparent rgba(var(--text-color) / 1) transparent;
          border-width: var(--arrow-size);
          width: 0;
          height: 0;
          right: calc(2rem + (var(--arrow-size) / 2) + 1px);
          position: absolute;
          bottom: 100%;
        }

        &.cm_hide {
          opacity: 0;
          transform: translateY(5%);
        }
      }
    }
  }
}

.cm_body {

  /* CM Icons */
  .cm_icon,
  .cm_verify-fitment__yes .cm_icon {
    stroke: rgb(var(--link-color));
    fill: rgb(var(--link-color));
  }

  .cm_verify-fitment__no .cm_icon {
    stroke: rgb(var(--star-color));
    fill: rgb(var(--star-color));
  }

  /* All CM Close Buttons */
  .cm_dialog.VehicleWidgetDialog.vehicle-dialog,
  .cm_dialog.SearchBoxDialog {
    .close {
      top: 1.25rem;
      right: 1.25rem;
      border-radius: 50%;
      transition: .15s ease-in-out;
      height: 3.5rem;
      width: 3.5rem;

      svg,
      &:before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      svg {
        height: 0.9em;
        width: auto;
        stroke-width: 3;
        stroke: currentColor;
      }

      &:before {
        content: "";
        transition: .15s ease-in-out;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: rgb(var(--text-color)/ 0.2);
      }

      &:hover {
        background-color: unset;

        svg {
          stroke: rgba(var(--bg-color));
        }

        &:before {
          background-color: rgb(var(--text-color)/1);
        }
      }
    }
  }

  /* Home Page Vehicle Select */
  .cm-ymm {
    padding: 0;
  }

  /* Shared Vehicle Select Styling */
  .cm_vehicle-widget__verify-fitment.cm_vehicle-widget__collapsible,
  .cm_vehicle-widget {
    border-radius: 2rem;
    border: var(--btn-border-width) solid rgba(var(--input-text-color)/.2);
    container-type: inline-size;
    margin: 0;
    padding: 0;

    >div {
      padding: 1.5rem;

      @container (min-width: 576px) {
        padding: 2.5rem;
      }
    }

    .cm_vehicle-widget_dropdowns,
    .cmTemplate_active {
      >.cm_vehicle-widget_dropdowns {
        padding: 0;
      }

      display: flex;
      flex-direction: column;
      align-items: normal;

      .cm_vehicle-widget_header,
      .cm_vehicle-widget_label {
        font-size: var(--h6-font-size);
        pointer-events: none;
        padding: 0;

        svg {
          display: none;
          margin-left: 2rem;
        }
      }

      .cm_vehicle-widget_title,
      .cm_vehicle-widget_header-label {
        flex: 1;
        color: rgb(var(--heading-color));
        font-family: var(--heading-font-family);
        font-style: var(--heading-font-style);
        font-weight: var(--heading-font-weight);
        line-height: 1;
        text-transform: var(--heading-text-transform);
        font-size: var(--h4-font-size);
        margin-bottom: 1.25rem;
        margin-right: 4rem;
        margin-right: 0;
        font-size: var(--h6-font-size);
      }

      .cm_vehicle-widget_body {
        gap: 1.15rem;
        flex-wrap: wrap;

        .cm_vehicle-widget_select-container {
          gap: 0.65rem;
          flex-wrap: wrap;
          flex-direction: unset;
          align-items: unset;
          display: grid;
          grid-template-columns: 1fr 1fr;

          .cm_vehicle-widget_select {
            flex: 1;
            margin: 0;
            min-width: 125px;
          }
        }

        .cm_vehicle-widget_button-container {
          .cm_vehicle-widget_button {
            height: min-content;
          }
        }
      }

      .cm_collapsible-elem {
        flex: 1;
        height: 100% !important;
      }

      @container (min-width: 576px) {
        .cm_vehicle-widget_body {
          gap: 1.5rem;

          .cm_vehicle-widget_select-container {
            display: flex;
            flex-wrap: nowrap;
            gap: 1rem;

            .cm_vehicle-widget_select {
              min-width: 125px;
              max-width: 175px;
            }
          }
        }
      }
    }

    /* All CM Input */
    .cm_select_inner-select,
    .cm_select__pretty,
    .cm_vehicle-widget_button {
      padding: 0.75rem 1.5rem;
      padding-right: 2.75rem;
      height: auto;
      font-size: 0.75em !important;
      line-height: normal;
      @container (min-width: 576px) {
        font-size: 0.9em !important;
        padding: 1rem 1.5rem;
        padding-right: 2.75rem;
      }
    }
    .cm_vehicle-widget_button {
      padding-right: 1.5rem;
    }

  }

  /* Modal Vehicle Select */
  .cm_dialog.VehicleWidgetDialog.vehicle-dialog {

    background-color: transparent;
    display: flex;
    align-items: flex-start;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease-in-out;
    transform: translateY(1.5rem);

    &:has(> .dialog-container) {
      pointer-events: all;
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }


    .dialog-container {
      flex-basis: 90%;
      top: 20%;
      width: 90%;

      @media (min-width: 991px) {
        flex-basis: 1000px;
        max-width: 1000px;
        margin: 0 auto;
      }

      .dialog-content {
        padding: 0;
        border-radius: 2rem;
        background-color: rgba(var(--bg-color));

        .dialog-body {
          .cm_vehicle-widget {
            border: none;
          }
        }
      }
    }
  }

  /* Collection / Search Vehicle Select */
  .cm_main-content {
    .cm_vehicle-widget {

      .cm_vehicle-widget_label {
        display: flex;
        gap: 1.5rem;

        @container (min-width: 576px) {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 3rem;
        }

        @media (min-width: 991px) {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 3rem;
        }

        .cm_vehicle-widget_title {
          font-size: 1.2em;
          line-height: 1;

          @media (min-width: 991px) {
            max-width: 650px;
            font-size: 1.75em;
          }
        }

      }
    }

    .cm_SearchHeader {
      border-bottom: 1px solid rgba(var(--text-color)/.15);
      margin-top: 1.5rem;

      @media (min-width: 991px) {
        margin-top: 3rem;
      }

      .cm_sort-select,
      .cm_sort-select:focus {
        cursor: pointer;
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDMwIDYwIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDMwdjYwSDB6TS41IDYwVjAiLz48cGF0aCBmaWxsPSIjMzMzIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im0xNS42NzYgMzMuMDM3IDUuMTAyLTUuMTAzLS43MDctMS4wODYtNC40OSA0LjQ5Mi00LjQ5LTQuNDkyLS43MDIgMS4wODYgNS4xMDIgNS4xMDMuMDc1LjExNS4wMi0uMDIuMDIuMDJ6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=) no-repeat 100% 48%;
        outline: none;
        border: none;
        box-shadow: none;
      }

    }
  }

  /* Brands List */
  #cm-brand-list {
    .cm_vehicle-categories__letters {
      margin-top: 3rem;
    }
  }

  /* Default search form styling to match CM to reduce CLS */
  .search__form {
    display: flex;
    position: relative;
    width: 100%;
  }

  @media (min-width: 769px) {
    .header__search {
      height: 44px;
      position: relative;
      margin-bottom: 16px;
    }
  }

  /* Search Dropdown */
  .header__search,
  .SearchBoxDialog {
    .cm_search-box-root {
      .cm_dropdown {
        background-color: rgba(var(--bg-color));
        max-height: unset;

        .cmRepeater_sections {
          max-height: 60vh;
          overflow: auto;

          .item.section-title {
            color: rgba(var(--text-color)/1);
            background: rgba(var(--bg-color));
            padding: 1rem 2rem;

            b {
              text-decoration: underline;
              text-decoration-thickness: 2px;
              text-underline-offset: 0.5rem;
            }
          }

          .cmRepeater_items {
            .item {
              padding: 2rem;

              &:hover {
                background-color: #f9f2f2;
              }

              .image-block {
                height: 70px;
                width: 70px;
                margin-right: 2rem;
                background-color: var(--blend-bg-color) !important;
                background: var(--blend-bg-gradient) !important;

                img {
                  mix-blend-mode: multiply;
                }
              }
            }
          }
        }

        .item.button-item.cm_browseAllButton {
          background-color: rgb(var(--text-color));
          color: rgb(var(--bg-color));
          padding: 1.5rem 2rem;
          position: relative;

          &:after {
            content: '';
            position: relative;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23fff'%3E%3Cpath d='m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
            width: 2rem;
            height: 2rem;
            left: 0.75rem;
            transition: 0.25s ease;
          }

          &:hover {
            text-decoration: underline;

            &:after {
              left: 1.15rem;
            }
          }
        }
      }
    }
  }

  /* Mobile Search Dropdown */

  .cm_dialog.SearchBoxDialog {

    div[data-focus-lock-disabled] {
      background: transparent;
    }

    .cm_search-box-root {

      .dialog-content {
        margin: 0;
        width: calc(100% - 3rem);
        height: calc(100% - 3rem);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: rgb(var(--bg-color));
        overflow: hidden;
        padding: 0;
        border-radius: 2rem;
        border: 1px solid transparent;

        .dialog-header {
          padding: 0 1rem;

          .dialog-title {
            color: rgb(var(--heading-color));
            font-family: var(--heading-font-family);
            font-style: var(--heading-font-style);
            font-weight: var(--heading-font-weight);
            line-height: 1;
            text-transform: var(--heading-text-transform);
            font-size: var(--h5-font-size);
            margin-bottom: 0;
            margin-right: 4rem;
          }

          .close {
            top: 1rem;
            right: 1rem;
          }
        }

        .cm_search-box_form-container {
          margin: 1rem 0;
          margin-top: 1.5rem;
          padding: 0 1rem;
          /* > div {
            z-index: 1;
          }
          &:before {
            content: '';
            position: absolute;
            height: calc(100% + 3rem);
            width: calc(100% + 20px);
            background: rgb(var(--bg-color));
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          } */
        }

        /* position: relative; */
        .cm_dropdown {
          flex: 1;
          display: flex;
          flex-flow: column;
          border: none;
          border-radius: 0;

          .cmRepeater_sections {
            max-height: 100%;
            flex: 1;

            .item.section-title {
              padding: 0.75rem 1rem;
            }

            .cmRepeater_items {
              .item {
                padding: 1rem;

                &:hover {
                  background-color: #f9f2f2;
                }

                .image-block {
                  height: 50px;
                  width: 50px;
                  margin-right: 1rem;
                }
              }
            }

            .item.button-item.cm_browseAllButton {
              flex: unset;
            }
          }
        }
      }
    }
  }

  /* Facets */
  .cm_FacetPanel {
    .cm_btn {
      margin-left: 0;
      margin-top: 1.5rem;
    }

    .cmRepeater_chips {
      display: flex;
      flex-flow: column;
      gap: 1.5rem;

      .cm_chip-name {
        margin-bottom: 0.5rem;
        display: block;
        font-size: 0.88em;
      }
    }

    .filter-input .input {
      margin-bottom: 1.5rem;
      padding: 0.75rem 1.5rem;
    }

    .facettitle,
    .cm_Facets {
      font-size: 1.85rem;
    }

    .cmRepeater_Values:not(:empty) {
      margin-top: 1.5rem;
    }

    .facetvalues {
      padding-bottom: 1.5rem;
    }

    .cmRepeater_ShowAlwaysValues,
    .cmRepeater_Values {
      display: flex;
      flex-flow: column;
      gap: 1.5rem;
    }

    .facetdiv {
      margin: 0;
      align-items: flex-start;

      a {
        line-height: 1;
      }

      input[type=checkbox] {
        width: 2rem;
        height: 2rem;
        margin-right: 1rem;
      }


      .facetentryval {
        font-size: 0.8em;
        position: relative;

        &:before {
          content: '('
        }

        &:after {
          content: ')'
        }
      }
    }

    .cm_show-all-container {
      font-size: 0.9em;
      padding: 2rem 0 0 0;
      justify-content: flex-start;

      a.cm_show-all {
        margin: 0;
        position: relative;

        &:before {
          content: '+ '
        }
      }
    }
  }

  /* Mobile Facets */
  .FacetDialog {

    .dialog-content {
      background-color: rgb(var(--bg-color));

      .dialog-header,
      .facettitle {
        background-color: transparent;
      }
    }
  }

  /* Product Pages */
  .product-info__block {
    .cm_vehicle-widget__verify-fitment {
      .cm_verify-fitment_compatible-parts-container {
        display: none;
      }

      .cm_vehicle-widget_button-container {
        margin: 0;
      }

      /* This product fits your.. */
      .cm_verify-fitment_fitment__container {
        .cm_verify-fitment_fitment {

          font-size: calc(var(--body-font-size) * .1rem);

          .cm_verify-fitment_vehicle-notes {
            &:before {
              content: 'Fitment Notes:';
              display: block;
              font-weight: 700;
              text-align: start;
            }

            margin-top: 1rem;
            padding: 0;
            font-size: 0.88em;
            display: flex;
            flex-flow: column;
            gap: 0.5rem;
          }
        }
      }

    }
  }

  /* Fitment Table */
  .fitment-table-body {
    .fitment-row {
      font-size: 0.88em;

      @media (min-width: 991px) {
        font-size: 1em;
      }

      .fitment-field-notes {
        font-size: 0.88em;
        flex: 4;
      }
    }
  }

  /* Product Slider */
  @media (min-width: 769px) and (max-width: 900px) {
    .cmRepeater_items {
      grid-template-columns: unset;
    }
  }
}