.et-product-list-filter-top-wrapper {
  background-color: $colorNeutral3;
  color: color-yiq($colorNeutral3);
  border-radius: $border-radius;
  padding: 30px 30px 12px 30px;
  margin-bottom: $grid-gutter-width;

  .et-product-list-filter-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .et-product-list-filter-layout {
    display: flex;
    font-size: 22px; // same size as productsperpage fontsize + padding
    align-items: flex-start;
    color: et-a11y-color(color-yiq($colorNeutral3), $colorNeutral3);
    margin-left: auto;
    margin-right: auto;
    @include media-breakpoint-up(sm) {
      margin-left: initial;
      margin-right: initial;
    }
    a {
      &:not(:first-child) {
        margin-left: 10px;
      }
      display: inline-block;
      &.active {
        color: $colorActive;
      }
    }
  }

  .et-product-list-filter-productsperpage {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    @include media-breakpoint-up(sm) {
      margin-right: 20px;
    }
    font-size: 12px;
    align-items: flex-start;
    color: et-a11y-color(color-yiq($colorNeutral3), $colorNeutral3);
    a {
      &:not(:last-child) {
        margin-right: 10px;
      }
      margin-bottom: 10px;
      text-decoration: none;
      display: inline-block;
      padding: 5px 10px;
      border: 1px solid currentColor;
      border-radius: $border-radius;
      &.active {
        color: $colorActive;
      }
    }
  }
  .active-filters {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    @include media-breakpoint-up(sm) {
      justify-content: flex-start;
    }
  }

  a.et-active-filter,
  a.et-active-filter-clear {
    text-decoration: none;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    margin-bottom: $grid-gutter-width / 2;
    &:hover {
      color: $colorLinkHover;
    }
  }
  a.et-active-filter {
    background-color: $colorContentBackground;
    color: color-yiq($colorContentBackground);
    border: 1px solid color-yiq($colorContentBackground);
    border-radius: $border-radius;
  }
  a.et-active-filter-clear {
    background-color: $colorNeutral4;
    color: et-a11y-color(color-yiq($colorNeutral4), $colorNeutral4);
    border-radius: $border-radius;
    border: 1px solid $colorNeutral4;
  }
  .et-active-filter-name {
    margin-right: 0.25em;
  }

  .et-product-list-filter-category-tree {
    &.before-filters {
      margin-bottom: $grid-gutter-width;
    }
    &.after-filters {
      margin-top: $grid-gutter-width;
    }
    .et-categories-mega-main-category {
      .et-categories-level-0 {
        padding: 15px 20px;
        font-weight: $font-weight-bold;
        display: block;
        text-decoration: none;
        border-bottom: 1px solid $colorNeutral4;
        border-top: 1px solid $colorNeutral4;
        margin-top: -1px; // to prevent 2px borders
        line-height: 1; // needed for icons to align just alright and make this more compact
        &.current {
          color: $colorActive;
        }
      }
    }
    .subcategory-wrapper {
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      .et-categories-mega-link,
      .et-categories-mega-collapse {
        display: block;
        margin-top: 15px;
      }
      a.current {
        color: $colorActive;
        font-weight: $font-weight-bold;
      }
    }
    a.et-categories-mega-show-all {
      margin-top: 10px;
      display: block;
      color: color-yiq($colorContentBackground, $colorFontMuted, $colorFontLight);
      &:hover {
        color: $colorLinkHover;
      }
    }
  }
  .et-filter-option-name {
    word-break: normal;
    white-space: nowrap;
    margin-right: 5px;
  }
}

.et-more-filters-trigger {
  display: none;
  .btn {
    padding: 10px 15px;
    margin-bottom: $grid-gutter-width / 2;
  }
}

.et-product-list-filter-left-wrapper {

  // Fixes ET360V2-305
  .text-truncate {
    max-width: 100%;
    display: inline-block;
    line-height: 1.15; // we cannot use 1 because it will cut off parts of the text on the lower end (e.g.: p, g, j, y), 1.15 is the minimum viable value that also works on FF
    // Make room for icons on the right
    &:not(:last-child) {
      max-width: calc(100% - 20px);
    }
  }

  .et-product-list-filter-header {
    padding: 20px;
    background-color: $colorNeutral3;
    color: color-yiq($colorNeutral3);
    margin-bottom: $grid-gutter-width;
  }

  .et-product-list-filter-layout {
    color: et-a11y-color(color-yiq($colorNeutral3), $colorNeutral3);
    a {
      display: inline-block;
      &:hover,
      &:active,
      &:focus {
        color: $colorLinkHover;
      }
      &.active {
        color: $colorActive;
      }
    }
  }

  .et-product-list-filter-item {
    [data-toggle="collapse"] {
      cursor: pointer;
      font-weight: $font-weight-bold;
      padding: 15px 20px;
      border-radius: $border-radius;
      background-color: $colorNeutral3;
      color: color-yiq($colorNeutral3);

      &[aria-expanded="false"] {
        margin-bottom: 2px;
      }
    }
  }

  .et-product-list-filter-total {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 12px;
    text-align: center;
  }

  .filter-item {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .et-product-list-filter-price-range,
  .et-product-list-filter-range {
    .filter-item {
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }

  .active-filters {
    margin-top: 0;
    margin-bottom: $grid-gutter-width;
  }

  .et-active-filters-title {
    font-weight: $font-weight-bold;
    margin-bottom: 20px;
  }

  a.et-active-filter,
  a.et-active-filter-clear {
    text-decoration: none;
    font-size: 12px;
    display: flex;
    margin-right: auto;
    align-items: center;
    padding: 5px 10px;
    &:hover {
      color: $colorLinkHover;
    }
  }
  a.et-active-filter {
    background-color: $colorContentBackground;
    color: color-yiq($colorContentBackground);
    border: 1px solid color-yiq($colorContentBackground);
    border-radius: $border-radius;
  }
  a.et-active-filter-clear {
    background-color: $colorNeutral4;
    color: et-a11y-color(color-yiq($colorNeutral4), $colorNeutral4);
    border-radius: $border-radius;
  }
  .et-active-filter-name {
    margin-right: 0.25em;
  }

  .et-product-list-filter-category-tree {
    &.before-filters {
      margin-bottom: $grid-gutter-width;
    }
    &.after-filters {
      margin-top: $grid-gutter-width;
    }
    .et-categories-mega-main-category {
      .et-categories-level-0 {
        padding: 15px 20px;
        font-weight: $font-weight-bold;
        display: block;
        text-decoration: none;
        border-bottom: 1px solid $colorNeutral4;
        border-top: 1px solid $colorNeutral4;
        margin-top: -1px; // to prevent 2px borders
        line-height: 1; // needed for icons to align just alright and make this more compact
        &.current {
          color: $colorActive;
        }
      }
    }
    .subcategory-wrapper {
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      .et-categories-mega-link,
      .et-categories-mega-collapse {
        display: block;
        margin-top: 15px;
      }
      a.current {
        color: $colorActive;
        font-weight: $font-weight-bold;
      }
    }
    a.et-categories-mega-show-all {
      margin-top: 10px;
      display: block;
      color: color-yiq($colorContentBackground, $colorFontMuted, $colorFontLight);
      &:hover {
        color: $colorLinkHover;
      }
    }
  }
}

.et-product-list-filter-total {
  margin-bottom: $grid-gutter-width;
  font-size: 12px;
  text-align: center;
}

// Mobile collapse layout
#et-product-list-filter-collapse-trigger-mobile,
#et-product-list-filter-modal-trigger-mobile,
#et-product-list-sorting-collapse-trigger-mobile,
#et-product-list-sorting-modal-trigger-mobile {
  font-weight: $font-weight-bold;
  cursor: pointer;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  @include media-breakpoint-up(lg) {
    display: none;
  }
  .et-product-list-filter-top & {
    padding-top: 0;
    text-align: center;
  }
}
.et-filters-active {
  #et-product-list-filter-modal-trigger-mobile {
    color: $colorActive;
  }
}
#et-product-list-sorting-dropdown-mobile {
  display: flex;
  align-items: center;
  .dropdown {
    width: 100%;
    .btn {
      margin-bottom: 0;
    }
  }
  @include media-breakpoint-up(lg) {
    display: none;
  }
  .et-product-list-filter-top & {
    .dropdown {
      .btn {
        margin-bottom: 15px;
      }
    }
  }
}
.et-product-list-sort-desktop-only {
  @include media-breakpoint-down(md) {
    display: none;
  }
}

#et-product-list-filter-collapse-content-mobile {
  @include media-breakpoint-up(lg) {
    display: block; // overrides collapse functionality
  }
}


.et-product-list-filter-item {
  .btn {
    background-color: $colorContentBackground;
    color: color-yiq($colorContentBackground);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 15px;
    border-radius: $border-radius;
    margin-bottom: $grid-gutter-width / 2;

    i {
      margin-left: auto;
    }

    &.active {
      border-bottom: 4px solid $colorActive;
    }
  }

  .dropdown-menu {
    padding: $grid-gutter-width / 2;
    .word-break {
      padding-right: 10px;
    }
    .badge {
      margin-left: auto;
    }
    z-index: $zindex-modal-backdrop - 1;
    .et-product-list-filter-modal-content-mobile & {
      max-height: 90vh;
      overflow-y: auto;
    }
  }

  .et-product-list-filter-price-range
  .et-product-list-filter-range {
    .dropdown-menu {
      min-width: 320px;
      padding: 25px 20px 20px 20px;
    }
  }

  .et-product-list-filter-sort {
    a.active {
      color: $colorActive;
    }
  }
  .badge {
    word-break: normal;
  }

  .rating {
    white-space: nowrap;
    color: $colorRatings;
  }
}

.badge {
  border-color: $colorFontMuted;
  background-color: transparent;
  color: $colorFontMuted;
}

.et-product-list-products-wrapper {

  .product-wrapper {
    margin-bottom: $grid-gutter-width;
  }

  /* advertising boxes styles */
  .et-info-box {
    .et-info-box-content img {
      width: 100%;
    }
    &:not(:last-child) {
      margin-bottom: $grid-gutter-width;
    }
    &.et-info-box-display-mode-row {
      // override row-cols-* styles
      flex-basis: 100%;
      max-width: 100%;
    }
  }
}

.et-ajax-filter-apply-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.et-product-list-filter-left-wrapper {
  .et-ajax-filter-apply-wrapper {
    margin-bottom: $grid-gutter-width;
  }
}
.et-ajax-filter-apply-spinner {
   display: none;
   .et-ajax-filter-loading & {
      display: inline;
   }
}
.et-ajax-filter-apply-total {
  .et-ajax-filter-loading & {
    display: none;
  }
}

@mixin et-info-box-col-span($rowCols, $colSpan, $infix) {
  .row-cols#{$infix}-#{$rowCols} > .col.et-info-box-display-mode-box.box-col-span#{$infix}-#{$colSpan} {
    flex: 0 0 percentage($colSpan/$rowCols);
    max-width: percentage($colSpan/$rowCols);
  }
}

@include et-info-box-col-span(1, 1, '');
@include et-info-box-col-span(2, 1, '');
@include et-info-box-col-span(3, 1, '');
@include et-info-box-col-span(4, 1, '');
@include et-info-box-col-span(5, 1, '');
@include et-info-box-col-span(6, 1, '');
@include et-info-box-col-span(2, 2, '');
@include et-info-box-col-span(3, 2, '');
@include et-info-box-col-span(3, 3, '');
@include et-info-box-col-span(4, 2, '');
@include et-info-box-col-span(4, 3, '');
@include et-info-box-col-span(4, 4, '');
@include et-info-box-col-span(5, 2, '');
@include et-info-box-col-span(5, 3, '');
@include et-info-box-col-span(5, 4, '');
@include et-info-box-col-span(5, 5, '');
@include et-info-box-col-span(6, 2, '');
@include et-info-box-col-span(6, 3, '');
@include et-info-box-col-span(6, 4, '');
@include et-info-box-col-span(6, 5, '');
@include et-info-box-col-span(6, 6, '');
@include media-breakpoint-up(sm) {
  @include et-info-box-col-span(1, 1, '-sm');
  @include et-info-box-col-span(2, 1, '-sm');
  @include et-info-box-col-span(3, 1, '-sm');
  @include et-info-box-col-span(4, 1, '-sm');
  @include et-info-box-col-span(5, 1, '-sm');
  @include et-info-box-col-span(6, 1, '-sm');
  @include et-info-box-col-span(2, 2, '-sm');
  @include et-info-box-col-span(3, 2, '-sm');
  @include et-info-box-col-span(3, 3, '-sm');
  @include et-info-box-col-span(4, 2, '-sm');
  @include et-info-box-col-span(4, 3, '-sm');
  @include et-info-box-col-span(4, 4, '-sm');
  @include et-info-box-col-span(5, 2, '-sm');
  @include et-info-box-col-span(5, 3, '-sm');
  @include et-info-box-col-span(5, 4, '-sm');
  @include et-info-box-col-span(5, 5, '-sm');
  @include et-info-box-col-span(6, 2, '-sm');
  @include et-info-box-col-span(6, 3, '-sm');
  @include et-info-box-col-span(6, 4, '-sm');
  @include et-info-box-col-span(6, 5, '-sm');
  @include et-info-box-col-span(6, 6, '-sm');
}
@include media-breakpoint-up(md) {
  @include et-info-box-col-span(1, 1, '-md');
  @include et-info-box-col-span(2, 1, '-md');
  @include et-info-box-col-span(3, 1, '-md');
  @include et-info-box-col-span(4, 1, '-md');
  @include et-info-box-col-span(5, 1, '-md');
  @include et-info-box-col-span(6, 1, '-md');
  @include et-info-box-col-span(2, 2, '-md');
  @include et-info-box-col-span(3, 2, '-md');
  @include et-info-box-col-span(3, 3, '-md');
  @include et-info-box-col-span(4, 2, '-md');
  @include et-info-box-col-span(4, 3, '-md');
  @include et-info-box-col-span(4, 4, '-md');
  @include et-info-box-col-span(5, 2, '-md');
  @include et-info-box-col-span(5, 3, '-md');
  @include et-info-box-col-span(5, 4, '-md');
  @include et-info-box-col-span(5, 5, '-md');
  @include et-info-box-col-span(6, 2, '-md');
  @include et-info-box-col-span(6, 3, '-md');
  @include et-info-box-col-span(6, 4, '-md');
  @include et-info-box-col-span(6, 5, '-md');
  @include et-info-box-col-span(6, 6, '-md');
}
@include media-breakpoint-up(lg) {
  @include et-info-box-col-span(1, 1, '-lg');
  @include et-info-box-col-span(2, 1, '-lg');
  @include et-info-box-col-span(3, 1, '-lg');
  @include et-info-box-col-span(4, 1, '-lg');
  @include et-info-box-col-span(5, 1, '-lg');
  @include et-info-box-col-span(6, 1, '-lg');
  @include et-info-box-col-span(2, 2, '-lg');
  @include et-info-box-col-span(3, 2, '-lg');
  @include et-info-box-col-span(3, 3, '-lg');
  @include et-info-box-col-span(4, 2, '-lg');
  @include et-info-box-col-span(4, 3, '-lg');
  @include et-info-box-col-span(4, 4, '-lg');
  @include et-info-box-col-span(5, 2, '-lg');
  @include et-info-box-col-span(5, 3, '-lg');
  @include et-info-box-col-span(5, 4, '-lg');
  @include et-info-box-col-span(5, 5, '-lg');
  @include et-info-box-col-span(6, 2, '-lg');
  @include et-info-box-col-span(6, 3, '-lg');
  @include et-info-box-col-span(6, 4, '-lg');
  @include et-info-box-col-span(6, 5, '-lg');
  @include et-info-box-col-span(6, 6, '-lg');
}
@include media-breakpoint-up(xl) {
  @include et-info-box-col-span(1, 1, '-xl');
  @include et-info-box-col-span(2, 1, '-xl');
  @include et-info-box-col-span(3, 1, '-xl');
  @include et-info-box-col-span(4, 1, '-xl');
  @include et-info-box-col-span(5, 1, '-xl');
  @include et-info-box-col-span(6, 1, '-xl');
  @include et-info-box-col-span(2, 2, '-xl');
  @include et-info-box-col-span(3, 2, '-xl');
  @include et-info-box-col-span(3, 3, '-xl');
  @include et-info-box-col-span(4, 2, '-xl');
  @include et-info-box-col-span(4, 3, '-xl');
  @include et-info-box-col-span(4, 4, '-xl');
  @include et-info-box-col-span(5, 2, '-xl');
  @include et-info-box-col-span(5, 3, '-xl');
  @include et-info-box-col-span(5, 4, '-xl');
  @include et-info-box-col-span(5, 5, '-xl');
  @include et-info-box-col-span(6, 2, '-xl');
  @include et-info-box-col-span(6, 3, '-xl');
  @include et-info-box-col-span(6, 4, '-xl');
  @include et-info-box-col-span(6, 5, '-xl');
  @include et-info-box-col-span(6, 6, '-xl');
}

/* Endless scroll */
.et-endless-scroll,
.et-endless-scroll-loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
}
.et-endless-scroll-more-trigger {
  margin-bottom: $grid-gutter-width / 2;
}
.et-endless-scroll-loading-indicator {
  margin-top: $grid-gutter-width / 2;
  margin-bottom: $grid-gutter-width / 2;
}

/* JTL Defaults, reduced */
.list-gallery {
  display: flex;
  flex-direction: column;
  .second-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  img {
    &.first {
      opacity: 1;
      transition: $transition-fade;
    }
    &.second {
      opacity: 0;
      transition: $transition-fade;
    }
  }
}

/* Configurable Hover Styles */
.et-product-list-wrapper.et-product-list-hover-style-switch,
.et-product-list-wrapper:not(.et-product-list-hover-style-switch):not(.et-product-list-hover-style-none):not(.et-product-list-hover-style-zoom) {
  .list-gallery:hover {
    img.first {
      opacity: 0;
    }
    img.second {
      opacity: 1;
    }
  }
}

.et-product-list-wrapper.et-product-list-hover-style-zoom {
  .list-gallery {
    overflow: hidden;
    img {
      transition: transform .5s ease-in-out;
    }
    &:hover img {
      transform: scale(1.2);
    }
  }
}


.et-product-list-wrapper .et-item-limit-more {
  font-size: small;
  text-align: center;
  font-style: italic;
  margin-top: 15px;
}

.item-slider.productbox-image {
  margin-bottom: 0;
}