/* General */

/* I used image data URI so that the codes can be easily moved around without additional efforts. Feel free to replace the image icons if necessary */
.bs-view-toggle-products button#grid-view {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAAQ3mAAEN5gE/RS85AAAE9WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDEgNzkuMTRlY2I0MmYyYywgMjAyMy8wMS8xMy0xMjoyNTo0NCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjIgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTA3LTI3VDAyOjExOjQ0KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wNy0yN1QwMjoxMjo0NSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNC0wNy0yN1QwMjoxMjo0NSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTU4MGRiOTQtOTgyYi00OThkLWEzMDMtMzdiNTcxZGQwNDhkIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU1ODBkYjk0LTk4MmItNDk4ZC1hMzAzLTM3YjU3MWRkMDQ4ZCIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjU1ODBkYjk0LTk4MmItNDk4ZC1hMzAzLTM3YjU3MWRkMDQ4ZCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTU4MGRiOTQtOTgyYi00OThkLWEzMDMtMzdiNTcxZGQwNDhkIiBzdEV2dDp3aGVuPSIyMDI0LTA3LTI3VDAyOjExOjQ0KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjQuMiAoTWFjaW50b3NoKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4DdkdAAAACQUlEQVRYheXYvWtUQRTG4Wdv8CMxmIiFgqKm0MYvMIiYUhQLUSxsFaxsBIm1qIVaCIKVAbHxHxAEOysFLUQigqJWIimimKiJ0cRoEovZJZO4N3uKIAt54cJ77/zO3dmdmXMOW8FxXMYqzJhVpXr/Amfwrfp8G25jwzy+FvMZZ9FffdaKPvRk78z5CdyAT9XBha7TWXBfgL+X8UcC/HiBSY21MsDkmsp8W4AfKaSfppEmS/yi8UUA+i9qqolUAlylxC8aX6AzAOYbbnWA78h8ZKN3FngcAJ9n/mmAf5L5lwG+v4IVOCF96+lssJZ83tT58KNYbzYP1FRg2Nw8At3YXR2fz0/gfmCyS0wVdEm1pN3cjFhbmtdSbampFeelpcmXElowhJtmaxOcwh7lS3OXVJwa1YJjWfClAH8r43sC/PtCqqKNtCXzmwL8xsxvDvAdBUYD4I/MjwX475n/GeDHmirFN4WaaiLtAa4185FGJ2citaYtulk/Zn4owH8tiS3TVAW7cE5qnusltFe4no2twUULJ7SrGMye90r1piyh3QlMdomp1j0dVt4GvMPbeXE9WKd+G/AFj+bxXdipfGkekgpOo1qwNws+GeB7M34r/jTgHxRSk9NI+zN/MMAfyny3tIkX0oHC3KNWpvHMR477SOZ/Bfjhwr9HsJ6mS/xi8TNNleKbQgWWB7hlJX7R+GjRy9c58uK80P0O8GtbpP9Hdkhd2Gid6xmume3SBrBPyg31+AFcwIcqP4jtUsKsxw/jyl8IaM455hpkNQAAAABJRU5ErkJggg==);
}

.bs-view-toggle-products button#list-view {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAdCAYAAADPa766AAAACXBIWXMAAAsTAAALEwEAmpwYAAAE9WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDEgNzkuMTRlY2I0MmYyYywgMjAyMy8wMS8xMy0xMjoyNTo0NCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjIgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTA3LTI3VDAyOjA5OjU0KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wNy0yN1QwMjoxMjozMCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNC0wNy0yN1QwMjoxMjozMCswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZDVmODcxODgtNzQ5Yi00NDkwLThjZTktNjVmNGMxMzg5OTI4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOmQ1Zjg3MTg4LTc0OWItNDQ5MC04Y2U5LTY1ZjRjMTM4OTkyOCIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmQ1Zjg3MTg4LTc0OWItNDQ5MC04Y2U5LTY1ZjRjMTM4OTkyOCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZDVmODcxODgtNzQ5Yi00NDkwLThjZTktNjVmNGMxMzg5OTI4IiBzdEV2dDp3aGVuPSIyMDI0LTA3LTI3VDAyOjA5OjU0KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjQuMiAoTWFjaW50b3NoKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5KrSt9AAABqklEQVRIie3Xu2sVQRQG8N/erEZ8EDRCQC18NGplIQRJFUQUrNLmX7AQREFBRYMXLBRs/QMEq2BtIcRC0MIiBh9IkKCID4gPLNRo1mLuhRFmIXBnb3U/GDiz31nOB3vm2zMwhSdYwiLeYhY79BEFfmBTgruJs9F+DFewH39R9Vh7CKt4iZkS62oSN0fxMB7gYI/FUziKQy38qkn4GcXbGxLRxUQLG2vI+HN9wuMGhdwp8QE7E+THKF7BCVzArswinqNdYBznsT4iP+M0vmUuOsAAPWEcDwWHe4Z53BW8o28o8E76+N7AuWi/BTPYk6l2S7CFebQJfl8l1u3opSE8qsnLsWbhew15KxIy1qCICtVaLf4Lntbk5cC9slMk1Zixxf/GMVySv0de4VqBSVwU+qDqJLwWZpGvmYoOMEDPKHAEVzHSefYHC8IQtNxPIW+wO8G1hdPUxVacwd7MGl6gXUr/Z/jfW0rcx+HMIro4sNYpfrRBETDdwoYaMp5hl4XbYFOYK4Wf3rYEuRrFKziJ69gnz02vENx8AZcLHBem+JFOwWG8xymhkfuCf0kKhhwjhRcaAAAAAElFTkSuQmCC);
}

.bs-view-toggle-products .bs-view-toggle{
  text-align: center;
}

.bs-view-toggle-products .bs-view-toggle__btn {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
}

.bs-view-toggle-products .bs-view-toggle__btn:visited,
.bs-view-toggle-products .bs-view-toggle__btn:focus {
  background-color: transparent;
}

.bs-view-toggle-products .bs-view-toggle__btn:hover,
.bs-view-toggle-products .bs-view-toggle__btn.active {
  background-color: #e8e8e8;
}

.bs-view-toggle-products .count-ordering-wrapper--bs {
  display: flex;
  align-items: center;
}

.bs-view-toggle-products .products .product{
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Grid View */
.bs-view-toggle-products.grid-view .products .product {
  display: block;
  visibility: visible;
  opacity: 1;
}

/* List View */
.bs-view-toggle-products.list-view .products {
  display: block;
}

.bs-view-toggle-products.list-view .products .product {
  opacity: 1;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  height: auto !important;
  margin-bottom: 20px;
  max-width: 100%;
  padding: 10px;
  width: 100%;
  visibility: visible;
}

.bs-view-toggle-products.list-view .products .product.product-small.col .product-small.box {
  align-items: center;
  display: flex;
  flex-direction: row;
  padding: 0;
  border-radius: 0;
}

.bs-view-toggle-products.list-view .products .product .product-small.box .box-image {
  padding: 0;
}

.bs-view-toggle-products.list-view .products .product.product-small.col .product-small.box .box-image img {
  object-fit: inherit;
  position: relative;
}

.bs-view-toggle-products.list-view .products .product-small .box-image {
  max-width: 126px;
  padding: 10px !important;
  width: auto;
}

.bs-view-toggle-products.list-view .products .product-small .box-image img {
  border-radius: 5px;
  display: block;
  height: auto;
  width: 100%;
}

.bs-view-toggle-products.list-view .products .product-small .box-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 70%;
}

.bs-view-toggle-products.list-view .products .product-small .title-wrapper {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.bs-view-toggle-products.list-view .products .product-small .bs-connect-product-loop-meta {
  margin-bottom: 10px;
}

.bs-view-toggle-products.list-view .products .product-small .loop-item-footer {
  text-align: left;
}

.bs-view-toggle-products.list-view .products > .col {
  /** Rural Buds is adding max-width to .cols, we need to override it **/
  max-width: 100%;
}

@media (min-width: 992px) {
  .bs-view-toggle-products.list-view .products.row-small > .col {
      padding-bottom: 10px;
  }
  .bs-view-toggle-products.list-view .products .product.product-small.col .product-small.box {
    border-radius: 5px;
  }

  .bs-view-toggle-products .count-ordering-wrapper{
    min-height: 72px;
  }

}

@media (min-width: 768px ) {
  .bs-view-toggle-products.list-view .products .product.product-small.col .product-small.box .box-text-products {
    padding: 20px;
  }
  .bs-view-toggle-products.list-view .products .product-small .box-image{
    max-width: 176px;
  }
}

@media (min-width: 480px) {
  .bs-view-toggle-products.list-view .products .product.product-small.col .product-small.box .box-text-products {
    padding: 10px;
  }
}

/* Responsive Styles */
@media (max-width: 768px) {

  .bs-view-toggle-products.list-view .products {
    margin: 0 !important;
    padding: 0 25px;
  }

  .bs-view-toggle-products.list-view .products .product {
    flex-direction: column;
  }

  .bs-view-toggle-products.list-view .products .product-small .box-image {
    margin-bottom: 10px;
    margin-right: 0;
    max-width: 125px;
    padding: 10px;
    width: 100%;
  }

  .bs-view-toggle-products.list-view .products .product-small .box-text {
    padding-left: 0;
    width: 100%;
  }

}