/**
 * Products Selection Bar
 * Filter bar, view toggle, sort dropdown, mobile filter button
 */

/********************
  Part - Main container
********************/
.products-selection {
  margin-bottom : 1.5rem;
}

.products-selection__row {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : 1rem;
  flex-wrap       : wrap;
}

/********************
  Part - Product count
********************/
.products-selection__count {
  flex-shrink : 0;
}

.products-selection__count-text {
  font-size : 0.875rem;
  color     : var(--color-grey-font-default, #516765);
}

.products-selection__count-text strong {
  font-weight : 600;
  color       : var(--color-black-default, #091C34);
}

/********************
  Part - Actions container
********************/
.products-selection__actions {
  display     : flex;
  align-items : center;
  gap         : 0.75rem;
}

/********************
  Part - View toggle (Grid/List)
********************/
.products-selection__view-toggle {
  display       : flex;
  align-items   : center;
  gap           : 2px;
  padding       : 4px;
  border        : 1px solid hsl(210, 20%, 90%);
  border-radius : var(--radius-md);
  background    : var(--color-white-default, #fff);
}

.view-toggle__btn {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 32px;
  height          : 32px;
  padding         : 0;
  border          : none;
  border-radius   : var(--radius-sm, 5px);
  background      : transparent;
  color           : var(--color-grey-font-default, #516765);
  cursor          : pointer;
  transition      : all 0.2s ease;
}

.view-toggle__btn:hover {
  background : var(--color-grey-default, #f3f5f7);
  color      : var(--color-black-default, #091C34);
}

.view-toggle__btn.active {
  background : var(--color-secondary);
  color      : var(--color-white-default, #fff);
}

.view-toggle__btn svg {
  width       : 18px;
  height      : 18px;
  flex-shrink : 0;
}

/********************
  Part - Sort dropdown
********************/
.sort-by-row {
  display     : flex;
  align-items : center;
}

.sort-by-row .sort-by {
  white-space  : nowrap;
  margin-right : 0.5rem;
  font-size    : 0.875rem;
  color        : var(--color-grey-font-default, #516765);
}

.products-sort-order {
  position : relative;
}

.products-sort-order .select-title {
  display       : flex;
  align-items   : center;
  gap           : 0.5rem;
  padding       : 0.5rem 0.75rem;
  font-size     : 0.875rem;
  font-weight   : 500;
  color         : var(--color-black-default, #091C34);
  background    : var(--color-white-default, #fff);
  border        : 1px solid hsl(210, 20%, 90%);
  border-radius : var(--radius-sm, 5px);
  cursor        : pointer;
  transition    : border-color 0.2s ease;
}

.products-sort-order .select-title:hover {
  border-color : var(--color-primary, hsl(210, 90%, 45%));
}

.products-sort-order .select-title i,
.products-sort-order .select-title .material-icons {
  font-size : 18px;
  color     : var(--color-grey-font-default, #516765);
}

.products-sort-order .dropdown-menu {
  position      : absolute;
  top           : 100%;
  right         : 0;
  left          : auto;
  min-width     : 200px;
  margin-top    : 4px;
  padding       : 0.5rem 0;
  background    : var(--color-white-default, #fff);
  border        : 1px solid hsl(210, 20%, 90%);
  border-radius : var(--radius-md);
  box-shadow    : 0 10px 30px rgba(9, 28, 52, 0.1);
  z-index       : 1;
}

.products-sort-order .select-list {
  display    : block;
  padding    : 0.625rem 1rem;
  font-size  : 0.875rem;
  color      : var(--color-black-default, #091C34);
  transition : all 0.2s ease;
  cursor     : pointer;
}

.products-sort-order .select-list:hover {
  background      : var(--color-grey-default, #f3f5f7);
  color           : var(--color-primary, hsl(210, 90%, 45%));
  text-decoration : none;
}

.products-sort-order .select-list.current {
  font-weight : 600;
  color       : var(--color-primary, hsl(210, 90%, 45%));
}

/********************
  Part - Mobile filter button
********************/
.products-selection__mobile-filter {
  display       : none;
  align-items   : center;
  gap           : 0.5rem;
  padding       : 0.5rem 1rem;
  font-size     : 0.875rem;
  font-weight   : 500;
  color         : var(--color-black-default, #091C34);
  background    : var(--color-white-default, #fff);
  border        : 1px solid hsl(210, 20%, 90%);
  border-radius : var(--radius-sm, 5px);
  cursor        : pointer;
  transition    : all 0.2s ease;
}

.products-selection__mobile-filter:hover {
  border-color : var(--color-primary, hsl(210, 90%, 45%));
  color        : var(--color-primary, hsl(210, 90%, 45%));
}

.products-selection__mobile-filter svg {
  width       : 18px;
  height      : 18px;
  flex-shrink : 0;
}

.products-selection__mobile-filter-count {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  min-width       : 20px;
  height          : 20px;
  padding         : 0 6px;
  font-size       : 0.6875rem;
  font-weight     : 700;
  color           : var(--color-white-default, #fff);
  background      : var(--color-tertiary, hsl(34, 100%, 59%));
  border-radius   : 20px;
}

/********************
  Part - Selected filters duplicate
********************/
.selectedFilters_duplicate_top {
  width         : 100%;
  margin        : 1.5rem 0 0.75rem;
  padding       : 1rem 1.25rem;
  border        : 1px solid hsl(210, 20%, 90%);
  border-radius : var(--radius-lg, 12px);
  background    : var(--color-white-default, #fff);
  box-shadow    : 0 10px 30px rgba(9, 28, 52, 0.05);
  display       : flex;
  flex-wrap     : wrap;
  gap           : 0.75rem;
  align-items   : flex-start;
}

.selectedFilters_duplicate_top.hidden {
  display : none;
}

.selectedFilters-duplicate__header {
  flex            : 1 1 100%;
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : 1rem;
  flex-wrap       : wrap;
}

.selectedFilters-duplicate__title {
  display     : flex;
  align-items : center;
  gap         : 0.75rem;
  flex-wrap   : wrap;
}

.selected-filters-label-top {
  display        : inline-flex;
  align-items    : center;
  gap            : 0.5rem;
  font-size      : 0.875rem;
  font-weight    : 600;
  letter-spacing : 0.04em;
  text-transform : uppercase;
  color          : var(--color-grey-font-default, #516765);
}

.selectedFilters-duplicate__icon {
  width       : 20px;
  height      : 20px;
  color       : var(--color-primary, hsl(210, 90%, 45%));
  flex-shrink : 0;
}

.selectedFilters-duplicate__actions {
  display     : flex;
  align-items : center;
  gap         : 0.5rem;
}

.selectedFilters-duplicate__clear {
  display         : inline-flex;
  align-items     : center;
  gap             : 0.35rem;
  padding         : 0.35rem 0.85rem;
  font-size       : 0.75rem;
  font-weight     : 600;
  letter-spacing  : 0.04em;
  text-transform  : uppercase;
  color           : var(--color-grey-font-default, #516765);
  background      : var(--color-grey-default, #f3f5f7);
  border          : 1px solid hsl(210, 20%, 90%);
  border-radius   : 999px;
  text-decoration : none;
  transition      : all 0.2s ease;
}

.selectedFilters-duplicate__clear:hover {
  color        : var(--color-primary, hsl(210, 90%, 45%));
  border-color : var(--color-primary, hsl(210, 90%, 45%));
  background   : rgba(59, 130, 246, 0.08);
}

.selectedFilters-duplicate__clear-icon {
  width  : 14px;
  height : 14px;
}

.selectedFilters_duplicate_top .cf {
  display       : inline-flex;
  align-items   : center;
  gap           : 0.4rem;
  padding       : 0.4rem 0.75rem;
  font-size     : 0.8125rem;
  font-weight   : 500;
  color         : var(--color-black-default, #091C34);
  background    : var(--color-grey-default, #f3f5f7);
  border        : 1px solid transparent;
  border-radius : 999px;
  transition    : all 0.2s ease;
}

.selectedFilters_duplicate_top .cf:hover {
  border-color : var(--color-primary, hsl(210, 90%, 45%));
  background   : rgba(59, 130, 246, 0.12);
  color        : var(--color-primary, hsl(210, 90%, 45%));
  box-shadow   : 0 6px 18px rgba(9, 28, 52, 0.08);
}

.selectedFilters_duplicate_top .cf .close,
.selectedFilters_duplicate_top .cf .remove {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 18px;
  height          : 18px;
  font-size       : 14px;
  line-height     : 1;
  color           : var(--color-grey-font-default, #516765);
  cursor          : pointer;
  border-radius   : 999px;
  transition      : color 0.2s ease;
}

.selectedFilters_duplicate_top .cf .close:hover,
.selectedFilters_duplicate_top .cf .remove:hover {
  color : var(--color-primary, hsl(210, 90%, 45%));
}

/********************
  Part - Responsive
********************/
@media (max-width : 1023px) {
  .products-selection__mobile-filter {
    display : flex;
  }

  .products-selection__view-toggle {
    display : none;
  }
}

@media (max-width : 767px) {
  .products-selection__row {
    flex-direction : column;
    align-items    : stretch;
    gap            : 0.75rem;
  }

  .products-selection__count {
    order      : 2;
    text-align : center;
  }

  .products-selection__actions {
    order           : 1;
    justify-content : space-between;
  }

  .sort-by-row {
    flex : 1;
  }

  .products-sort-order .select-title {
    width           : 100%;
    justify-content : space-between;
  }

  .products-sort-order .dropdown-menu {
    left  : 0;
    right : 0;
  }

  .selectedFilters_duplicate_top {
    padding : 0.875rem 1rem;
    gap     : 0.5rem;
  }

  .selectedFilters-duplicate__header {
    flex-direction : column;
    align-items    : flex-start;
  }

  .selectedFilters-duplicate__actions {
    width           : 100%;
    justify-content : flex-start;
  }
}

@media (max-width : 575px) {
  .products-selection__mobile-filter-text {
    display : none;
  }

  .products-selection__mobile-filter {
    padding : 0.5rem;
  }

  .selectedFilters_duplicate_top {
    margin-top : 1rem;
  }

  .selectedFilters_duplicate_top .cf {
    width           : 100%;
    justify-content : space-between;
  }
}

/********************
  Part - View mode classes for product grid
********************/
.products.view-list {
  display        : flex;
  flex-direction : column;
  gap            : 1rem;
}

.products.view-list .product-miniature {
  width : 100%;
}

.products.view-list .product-miniature .thumbnail-container {
  flex-direction : row;
  border-radius  : var(--radius-lg, 12px);
}

.products.view-list .product-miniature .product-miniature__image-wrapper {
  width        : 120px;
  min-width    : 120px;
  aspect-ratio : 1 / 1;
}

.products.view-list .product-miniature .product-description {
  display         : flex;
  flex-direction  : row;
  flex            : initial;
  align-items     : center;
  justify-content : space-between;
  padding         : 1rem;
  min-width       : 0;
}

.products.view-list .product-miniature .product-title {
  margin-bottom : 0.25rem;
}

.products.view-list .product-miniature__footer {
  flex-direction  : row;
  align-items     : center;
  justify-content : space-between;
  padding-top     : 0;
  margin-top      : 0;
  border          : none;
  gap             : 1rem;
}

.products.view-list .product-miniature .product-price-and-shipping {
  margin : 0;
}

.products.view-list .product-miniature .add-to-cart__wrapper,
.products.view-list .product-miniature .see-combinations__wrapper {
  margin : 0;
  width  : auto;
}

.products.view-list .product-miniature .add-to-cart,
.products.view-list .product-miniature .see-combinations {
  padding   : 0.5rem 1rem;
  font-size : 0.8125rem;
}

@media (min-width : 640px) {
  .products.view-list .product-miniature .product-miniature__image-wrapper {
    width     : 160px;
    min-width : 160px;
  }

  .products.view-list .product-miniature .product-description {
    padding : 1.25rem;
  }
}

@media (max-width : 575px) {
  .products.view-list .product-miniature .thumbnail-container {
    flex-direction : column;
  }

  .products.view-list .product-miniature .product-miniature__image-wrapper {
    width      : 100%;
    min-width  : 100%;
    max-height : 200px;
  }

  .products.view-list .product-miniature__footer {
    flex-direction : column;
    align-items    : stretch;
  }

  .products.view-list .product-miniature .add-to-cart__wrapper,
  .products.view-list .product-miniature .see-combinations__wrapper {
    width : 100%;
  }
}