/** ================================
 *  STYLES FOR PAGE - PRODUCTS
 * 	
 * 	CSS Formatting Rules - from big to small
 * 	- positioning -> block -> typografy -> styling -> animation -> other
 *  ================================
*/
.syling {
  /* positioning 
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;*/

  /* block model 
  display: inline-block;
  float: left;
  width: 150px;
  height: 150px;
  margin: 25px;
  padding: 25px;

  /* typografy 
  font: normal 13px/1.5 "Helvetica", sans-serif;
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
  font-family: "Helvetica", sans-serif;
  text-align: start;

  /* styling 
  color: #999999;
  background-color: #e3e3e3;
  border: 1px solid #333333;
  border-radius: 5px;
  opacity: 1;

  /* animation 
  transition: all 0.8s;

  /* other
  will-change: auto; */
}

/* PRUDUCTS FILTER AND VIEW SECTION  ============= */
.products__inner {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}
/* FILTER SECTION  =============================== */
.filter {
	display: flex;
	flex-direction: column;	
	width: 25%;
}
/* SEARCH BUTTON
 ----------------------------- */
.filter__search  {
	display: flex;
	justify-content: space-between;
	height: 50px;
	width: 100%;
	background-color: #f9f9f9;
	
	border-radius: 8px;
	overflow: hidden;
}
.filter__search-form {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.filter__search-input {
	min-width: 79%;
	padding-left: 20px;
	font-size: 13px;
	font-family: "bpg_supersquare",sans-serif;
	text-transform: uppercase;
}
.filter__search-btn {
	width: 50px;
	text-align: center;

}
.filter__search-btn:hover {
	background: #ffb700;
	cursor: pointer;
	transition: 0.5s;
}
/* FILTER TITLE
 ----------------------------- */
.filter__title {
	display: flex;
	column-gap: 15px;
	align-items: center;
	height: 50px;
	margin-top: 30px;
	padding: 0px 25px;
	color: #000;
	background: #f9f9f9;
	border-radius: 8px;
	font-family: "lumen__regular";
	text-transform: uppercase;
	font-feature-settings: "case" on;
	
}
.filter__icon {
  width: 22px;
  height: 20px;
  cursor: default!important;
}
/* SVG STYLE
 ----------------------------- */
.filter svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: rgb(46, 46, 46);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
  cursor: pointer;
  overflow: visible;
}

/* FILTER MENU BLOCK
 ----------------------------- */
.filter__cats {
	position: relative;
	/*width: 100%;*/
	font-size: 13px;
	font-family: "bpg_arial",sans-serif;
	overflow: hidden;
}

/* FILTER MENU BUTTONS
 ----------------------------- */
.link {
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 10px 25px;
	column-gap: 15px;
	background-color: #f9f9f9;
	margin-top: 3px ;
	border-radius: 8px;
	font-weight: 300;
	font-size: 14px;
	
	position: relative;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
/* FILTER BUTTON ARROW
 ----------------------------- */
.accordion li i {
	position: absolute;
	top: 16px;
	left: 12px;
	font-size: 18px;
	color: #595959;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
/* FILTER BUTTON ARROW DOWN
 ----------------------------- */
.accordion li i.fa-chevron-down {
	right: 25px;
	left: auto;
	font-size: 12px;
}


/* FILTER SUBMENU
 ----------------------------- */
.submenu {
 	position: relative;
 	margin: 0;
 	display: none;
 	font-size: 14px;
 }
.submenu li {
 	position: relative;
}
.submenu__link:first-child {
	margin-top: 3px;
}
.submenu__link {
	display: flex;
	align-items: center;
	height: 50px;
	padding-left: 70px;
	margin-bottom: 3px;
	font-weight: normal;
	text-decoration: none;
	color: #9a9a9a;
	background: #f9f9f9;
	border-radius: 8px;
	cursor: pointer;
	-webkit-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.submenu__link:before {
 	position: absolute;
 	content: "";
 	top: 22px;
 	left: 35px;
 	height: 6px;
 	width: 6px;
 	background: #ffb700;
 	border-radius: 50%;
 	opacity: 0.5;
}
.submenu__link:hover {
	position: relative;
	padding-left: 71.5px;
	color: #000;
	opacity: 1;
}
 
 /* FILTER BUTTON ACTIVE
 ----------------------------- */
.active .link {
	/*color: #ffb700;*/
}

/* FILTER BUTTON ACTIVE ARROW
 ----------------------------- */
.active i {
	color: #ffb700!important;
}
/* FILTER BUTTON ACTIVE ARROW DOWN
 ----------------------------- */
.active i.fa-chevron-down {
	-webkit-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
/* FILTER ACTIVE SUBMENU
 ----------------------------- */
.active .submenu {
	display: block;
	margin-bottom: 0;
}
.submenu__link--active {
 	color: #000;
 	opacity: 1;
 }
/* FILTER SUBMENU IF IT HAS CLASS DEFAULT THEN DISPLAY BLOCK
 ----------------------------- */
.accordion li.default .submenu {display: block;}


/* FILTER PRICE
 ----------------------------- */
.filter__price {
	margin-top: 3px;
	padding: 0 30px;
	padding-bottom: 45px;
	background: #f9f9f9;
	border-radius: 8px;
}
.price-input {
	font-family: "bpg_arial",sans-serif;
	width: 100%;
	display: flex;
	margin: 20px 0 30px;
	justify-content: center;
}
.field input {
  width: 40px;
  height: 100%;
  outline: none;
  font-size: 13px; 
  -moz-appearance: textfield;
}
.field span {
}
	input[type="number"]::-webkit-outer-spin-button,
	input[type="number"]::-webkit-inner-spin-button {
	  -webkit-appearance: none;
}
.range {
  height: 5px;
  position: relative;
  background: #ddd;
  border-radius: 5px;
}

.price-display {
    display: flex;
    align-items: left;
    justify-content: left;
    font-size: 14px;
    color: #333; /* Adjust color as needed */
    margin-top: 30px; /* Adjust margin as needed */
    padding-bottom: 20px;
    font-family: 'arial', sans-serif;
  
}

.price-display span {
    margin: 0 2px; /* Adjust spacing between spans as needed */
}

#min-price-display,
#max-price-display {
    font-weight: bold; /* Make the price values bold */
}

/* Additional CSS to ensure consistent background color */
.progressbar {
    height: 100%;
    position: absolute;
    border-radius: 5px;
    background: #ffb700; /* Yellow background color */
}
.range-input {
  position: relative;
  	cursor: pointer;
}
.range-input input {
  position: absolute;
  width: 100%;
  height: 5px;
  top: -5px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #ffb700;
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
input[type="range"]::-moz-range-thumb {
  height: 17px;
  width: 17px;
  border: none;
  border-radius: 50%;
  background: #ffb700;
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
.range__submit {
	width: 100%;
	text-align: center;
	margin-top: 40px;
}
.range__submit span{
	display: block;
	width: 60%;

	margin: 0 auto;
	border: solid 2px #ffb700;
	border-radius: 6px;
	padding: 12px;
	font-size: 12px;
	font-family: 'bpg_supersquare';
	cursor: pointer;
	color: #000;
}
.range__submit span:before {
  background: #ffb700;
  -webkit-transition: top 0.2s ease-in; 
}
.range__submit span:hover {
  border: 2px solid #ffb700;
   -webkit-transition: all 0.2s ease-in;
  color:#fff;
}
.range__submit span:hover:before {
    top: 0; 
}


/* PRODUCTS SECTION
 ----------------------------- */
.products__items {
	flex: 75%;
	margin-left: 30px;
}
.products__items .tab__inner {
	overflow: hidden;
	margin-top: 20px;
	padding-top:10px;
	padding-bottom: 30px;
	/*gap: 20px;*/
}
.products__items .tab__link {
	/*flex: 1 0 20%;*/
	/*padding: 0px;*/

}
/* GRID VIEW STYLE
 ----------------------------- */
.grid-view {
	flex: 1 0 31%!important;
	/*margin: 0 5px!important;*/
	animation: bouncein2; 
  animation-duration: .5s ;
}
.grid-view .tab__box {
	min-height: 340px!important; /* or 100% */
}

@keyframes bouncein2 {
   0% { 
      opacity: 0; 
      transform: scale(.5);
   }
   20% { 
      opacity: 1; 
      transform: scale(1.05);
   }
   40% { 
     
      transform: scale(.8);
   }
   60% {
      transform: scale(1.05);
   }
   80% {
      transform: scale(.95);
   }
   100% { 
      transform: scale(1);
   }
} 
/* LIST VIEW STYLE
 ----------------------------- */
.tab__box {
	height: 253px!important; /* or 100% */
}

.list-view {
	animation: bouncein; 
  animation-duration: .5s ; 
}
@keyframes bouncein {
   0% { 
      opacity: 0; 
      transform: scale(.5);
   }
   20% { 
      opacity: 1; 
      transform: scale(1.05);
   }
   40% { 
     
      transform: scale(.8);
   }
   60% {
      transform: scale(1.05);
   }
   80% {
      transform: scale(.95);
   }
   100% { 
      transform: scale(1);
   }
} 



.no_products {
	margin-top: 30px;
	font-family: 'bpg_arial', sans-serif;
}
/*------------------------------------*\
  GRID AND LIST VIEW ICONS
\*------------------------------------*/

.view {
  display: flex;
  column-gap: 10px;
}
.view__link {
  display: flex;
  justify-content: center;
  flex-direction: row;
  column-gap: 5px;
  align-items: center;
  padding:5px;
  font-size: 18px;
  color: #000;
  border: solid 1px #000;
  border-radius: 3px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  transition: 0.25s;
  cursor: pointer;
}
.view__link:hover {
  color: #000;
  background-color: #ffb700;
  box-shadow: 0px 0px 0px 1px #ffb700;
  border: solid 1px transparent;
}

/* when grid or list is active */
.view__active {
  color: #000;
  background-color: #ffb700;
  border: solid 1px transparent;
  box-shadow: 0px 0px 0px 1px #ffb700;
}
.grid-icon-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1.2px; /* Adjust gap between squares */
    width: 18px; /* Adjust width as needed */
    height: 18px; /* Adjust height as needed */

}

.grid-icon-3 div {
    background-color: #333; /* Adjust color as needed */
    border-radius: 1px;
}

.grid-icon-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.6px; /* Adjust gap between squares */
    width: 18px; /* Adjust width as needed */
    height: 18px; /* Adjust height as needed */

}

.grid-icon-2 div {
    background-color: #333; /* Adjust color as needed */
    border-radius: 2px;
}
/*------------------------------------*\
  GRID VIEW ITEMS STYLE
\*------------------------------------*/
/* Styles for grid view */
.grid__container {
	margin-top: 30px;
	display: grid;
	 grid-template-columns: repeat(3, 1fr);
	/* grid-template-columns: repeat(auto-fill, minmax(200px, 200px));*/
	row-gap: 30px;
	column-gap: 10px;
}
.item {
	position: relative;
	animation: bouncein2; 
	animation-duration: .5s ;
}

.grid__name {
	padding: 10px 0 5px 20px;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	font-family: 'Noto Sans Georgian', sans-serif;
}
.grid__price {
	text-align: left;
	padding-left: 20px;
	font-weight: bold;
	font-family: 'Poppins', sans-serif;
}
.grid__price span:first-child {
	padding-right: 5px;
}
.old__price {
	text-decoration-line: line-through;
	color: #FF0000;
	text-align: left;
}

.grid__link {
	display: block;
	object-fit: cover;
	cursor: pointer;
}
.grid__img-box {
	position: relative;
	display: flex;
	max-height: 311px; /* Ensure container height is defined */

	background-color: #f9f9f9;
	overflow: hidden;
	border-radius: 15px;
}

.grid__img {
	object-fit: cover;
	transition: transform 0.5s;
	width: 100%; /* Fill width of parent */
	height: 100%; /* Fill height of parent */
	box-sizing: border-box; /* Include padding and border in the element's total size */
}

.grid__img:hover {
	transform: scale(1.1);
}
.grid__cart {
	position: absolute;
	bottom: 10px;
	right: 10px;
	opacity: 1;
	display: flex;
	column-gap: 30px;
	transition: 0.1s ease-in;

}	
.grid__item:hover > .grid__cart {
opacity: 1;
}


.grid__description {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: -30px;
	padding: 40px 20px 10px 20px;

	border-radius: 15px;
	box-shadow: 0 1px 35px rgba(0, 0, 0, 0.1);
	width: 180px;
	height: 100%;
	font-family: 'regular', sans-serif;
	font-size: 13px;

}
.grid__text {
	max-width: 140px;
	word-wrap: break-word;
	}
.grid__icons {
	display: flex;
	column-gap: 10px;
	margin-top: 10px;
	justify-content: center;
	font-size: 17px;
}

/* Style for the counter section */
.counter {
	display: flex;
	align-items: center;
	margin-bottom: 10px; display: none;
}

/* Style for the minus and plus buttons */
.minus, .plus {
	display: inline-block;
	padding: 10px 15px;
	background-color: #f0f0f0;
	cursor: pointer;
	border-radius: 3px;
	font-size: 12px;

}

@keyframes moveToCart {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(calc(var(--move-x) / 2), calc(var(--move-y) / 2)) scale(0.3);
    	border-radius: 0%;
    	opacity: 0.8;
    }
    100% {
        transform: translate(var(--move-x), var(--move-y)) scale(0.1);
        opacity: 0.2;
        border-radius: 80%;
    }
}


/* Additional styles for the input */
.quantity-input {
    padding: 5px 10px;
    width: 50px; /* Adjust width as per your design */
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f0f0f0;
}

/* Style for the add-to-cart button */
.add-to-cart {
    display: block;
    width: 35px;
    height: 35px;
    padding: 10px;
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition:  0.3s ease;
    font-family: "lumen__regular";
    font-size: 14px;
}

.add-to-cart:hover {
    color: #fff;
    background-color: #000;

}

@media screen and (max-width: 767px) {
    .grid__container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two equal columns */
        gap: 10px;
    }
    
    .grid__name {
		padding: 5px 0 0 5px;
		font-size: 12px;
	}
	
   .grid__img-box {
       max-height: 152px;
   }
}

/* LIST VIEW ITEMS STYLE
 ----------------------------- */
.list {
  width: 100%; 
  text-align: left;

  border-collapse: collapse;
  border-spacing: 0px 30px; 
}
.list__container {
	margin-top: 30px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/*grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));*/
	/* grid-template-columns: repeat(auto-fill, minmax(200px, 200px));*/
	gap: 10px;
	row-gap: 20px;
}

.list__name {
	padding: 10px 0 5px 20px;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	font-family: 'Noto Sans Georgian', sans-serif;
}
.list__price {
	text-align: left;
	padding-left: 20px;
	font-weight: bold;
	font-family: 'Poppins', sans-serif;
}
.list__price span:first-child {
	padding-right: 5px;
}

.list__link {
	display: block;
	object-fit: cover;
	cursor: pointer;
}
.list__img-box {
	position: relative;
	display: flex;
	max-height: 235px; /* Ensure container height is defined */

	background-color: #f9f9f9;
	overflow: hidden;
	border-radius: 15px;


}

.list__img {
	object-fit: cover;
	transition: transform 0.5s;
	width: 100%; /* Fill width of parent */
	height: 100%; /* Fill height of parent */
	box-sizing: border-box; /* Include padding and border in the element's total size */
}

.list__img:hover {
	transform: scale(1.1);
}
.list__description {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: -30px;
	padding: 40px 20px 10px 20px;

	border-radius: 15px;
	box-shadow: 0 1px 35px rgba(0, 0, 0, 0.1);
	width: 180px;
	height: 100%;
	font-family: 'regular', sans-serif;
	font-size: 13px;

}
.list__text {
	max-width: 140px;
	word-wrap: break-word;
}
.list__icons {
	display: flex;
	column-gap: 10px;
	margin-top: 10px;
	justify-content: center;
	font-size: 17px;
}
.list__cart {
	position: absolute;
	bottom: 10px;
	right: 10px;
	opacity: 1;
	display: flex;
	column-gap: 30px;
	transition: 0.1s ease-in;

}	
.list__item:hover > .grid__cart {
opacity: 1;
}
@media screen and (max-width: 767px) {
    .list__container {
    	margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Two equal columns */
        gap: 10px;
 

    }
    .list__cart {
    	right: 7px;
    	bottom: 7px;
    }
    .list__img-box {
    	max-height: 98px; /* Ensure container height is defined  114px here*/
    	border-radius: 8px;
    }

    .list__name {
		padding: 5px 0 0 5px;
		font-size: 12px;
	}
    .list__price {
		padding-left: 5px;
	}
	.list__price span:first-child {
	padding-right: 0px;
}
	.add-to-cart {
		width: 25px;
		height: 25px;
		padding: 5px;
	}
   
}
/* PRODUCTS DISPLAY MODE SECTION
 ----------------------------- */
.products__display-type {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 50px;
	background-color: #f9f9f9;
	border-radius: 8px;
}
.products__display-btns {
	display: flex;
	align-items: center; /* ??? */
}
#btnContainer {
	display: flex;
	align-items: center;
	margin-left: 15px;
}
#btnContainer .btn {
	width: 28px;
	height: 28px;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.6);
	border-radius: 2px;
	line-height: 0;
	text-align: center;
	margin-left: 10px;
}
.btn svg {
	fill: #000;
}
/* btnContainer active btn style */
.sort__active {
	background: #ffb700;
	box-shadow: 0px 0px 0px 1px #ffb700!important;
}
.active__sort{
	background: #ffb700;
	box-shadow: 0px 0px 0px 1px #ffb700!important;
	}
.active__list:nth-child(2) {
	background: #ffb700;
	box-shadow: 0px 0px 0px 1px #ffb700!important;
	}
.active__list:nth-child(3) {
	background: none;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.6)!important;
}
.active__grid:nth-child(2) {
	background: none;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.6)!important;
}
.active__grid:nth-child(3) {
	background: #ffb700;
	box-shadow: 0px 0px 0px 1px #ffb700!important;
}
/* mobile filter icon style */
.filter__btn {
	width: 28px;
	height: 28px;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.6);
	border-radius: 2px;
	line-height: 0;
	text-align: center;
	margin-left: 10px;
	display: none;
}
.filter__btn svg {
}
/* mobile filter close icon style */
.close {
	position: absolute;
	display: none;
	right: 30px;
	top: 23px;
	width: 30px;
	height: 30px;
	font-size: 30px;
	padding: 2px;
	font-family: bpg_arial;
	}
/* mobile search icon style */
.mobile__search__btn {
	width: 28px;
	height: 28px;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.6);
	border-radius: 2px;
	line-height: 0;
	text-align: center;
	margin-left: 10px;
	display: none;
}
.mobile__cart__btn {
	width: 28px;
	height: 28px;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.6);
	border-radius: 2px;
	line-height: 0;
	text-align: center;
	margin-left: 10px;
	display: none;
}
/* mobile search box */
#mobile__search {
	display: none;
}
/* display type right text style */
.products__display-text {
	font-size: 12px;
	font-family: 'lato', sans-serif;
	margin-right: 30px;
}
.mobile__cart__btn {
	display: none;
}



@media screen and (max-width: 767px) {

	/** LEFT FILTER STYLE **/
	.filter {
		display: none; /*at start not showed*/
		background: #f9f9f9;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 80px;
		left: 0;
		overflow-y:scroll;
		transition: 1s;
		animation: fadeIn 0.2s linear;
		padding-top: 10px;
		overflow-x: hidden;
		z-index: 8;
	}

  	.filter__title {
		justify-content: left;
		background-color: #fff;
		margin-top: 20px;
		font-weight: bold;

	}
	.filter__title:first-child {
		margin-top: 0;
	}

	.filter__cats {
	  font-size: 18px;
	  padding-left: 0;
	  text-align: center;
	  }
	.filter__cats:before {
		display: none;
	}
	
	.filter__price {
		width: 100%;
		margin: 0 auto;
	
	}
	.field {
		margin: 0 auto;
		width: 40px;
		justify-content: space-around;
	}

  
	/* filter close btn */
	.close {
		display: block;
	}

  /** SORT STYLE  **/
	.filter__btn {
		display: block;
	}
	.mobile__search__btn {
		display: none;	
	}
	/* mobile search box */
	#mobile__search {
		display: block;
		position: absolute;
		margin-top: -39px;
		left: 128px;
		margin-left: 10px;	
		height: 28px;
		box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.6);
		border-radius: 2px;
		line-height: 20px;
	}
	.mobile__search-form {
		display: flex;
		justify-content: space-between;
	}
	.mobile__search-input {
		min-width: 80%;
		font-family: "bpg_supersquare",sans-serif;
		font-size: 12px;
		padding-left: 10px;
	}
	.mobile__search-icon {
		padding: 5px 5px 0 5px;
	}
	.products__items .tab__inner {
		margin-top: 0;
		row-gap: 15px;
	}

	/* PRODUCT SECTION **/
	.products__items {
		margin-left: 0;
	}
	.products__inner {
		margin-top: 0;

	}
	.products__items .tab__link {
		
		flex: 1 0 31%;

	}
	.products__items .tab__box {
		min-height: 100px;
		max-height: 200px;
	}


	/* filter section */
	.filter {
		padding-bottom: 150px;
	}
	.range__submit span{
		width: auto;
	}
	.close {
		display: none;
	}
	/* product sort section 
		 display type fixed at bottom
	*/
  
	.products__display-btns {
  	flex: 100%;
  }

  #btnContainer {
  	width: 100%;
  	display: flex;
  	
  	margin-left: 15px;
  }
/** btns **/
	.mobile__search__btn {
		display: block;
	}
	.mobile__cart__btn {
		display: block;
  	margin-right: 10px;
  }
  /* mobile search box */
  #mobile__search {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
		display: none;
	
		margin-left: 0;
		z-index: 8;
		
		background: rgba( 255, 255, 255, 0.37);
		box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
		backdrop-filter: blur( 4px );
		-webkit-backdrop-filter: blur( 4px );
	
			
	}
	.mobile__search-form {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 7px;
		border-radius: 5px;
		border-bottom: solid 2px #ffb700;
		background: rgba( 255, 255, 255, 1);
		box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
	

		border: 1px solid rgba( 255, 255, 255, 0.18 );
		width: 60%;
	}
	
	/** text after btns **/
	.products__display-text {
	
	  	width: 100%;
	  	text-align: right;

	  }


	.products__items .tab__link {
		flex: 1 0 31%; /* explanation below */
		max-width: 100%;
	}
	#products__view .tab__box {
		min-height: 100px;
		max-height: 130px;
		border-radius: 10px;
	}

	.grid-view {
		flex: 1 0 47%!important; /* explanation below */
		max-width: 100%;
		margin: 0!important;
	}

	.grid-view .tab__box {
		min-height: 190px!important;
	}
    .grid__price  {
	padding-left: 5px;
}
.grid__price span:first-child {
    padding-right: 2px;
}
	.old__price {
		font-size: 11px;
	}
		.actual__price {
		font-size: 12px;
	}
	
  .tab__link p {
  	padding: 5px 5px 0 20px;
  }
  
  


}


@media screen and (max-width: 960px) {
	.products__items .tab__box {
		min-height: 100px;
		max-height: 200px;
}
	.footer {
		margin-bottom: 5px!important;
	}

}
/*------------------------------------*\
  PAGINATION
\*------------------------------------*/
.paginate__links {
    margin-top: 30px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	column-gap: 5px;
	
	
}

.paginate__link {
	cursor: pointer;
    font-family: 'lumen__medium', sans-serif;
    font-size: 16px;
    transition: 0.1s;
    /* padding: 0px 15px; */
    display: flex;
    width: 40px;
    height: 40px;
    /* text-align: center; */
    align-items: center;
    justify-content: center;
    /* gap: 5px; */
    border-radius: 5px;
    border: solid 1px #ccc;

}
.paginate__prev:first-child {
	border: none;
	width: auto;
}
.paginate__next:last-child {
	border: none;
	width: auto;
}

.paginate__link:hover {
	color: #ffb700;
	text-underline-offset: 5px;
	font-weight: bold;
}

.pagination a.active__pagination {
	color: #ffb700;

}

.active__page {
  color: #ffb700;
  font-weight: bold;
   /*border: solid 2px #ffb700;*/
  
}

/* Active page link */
.pagination a.active__pagination {
    background-color: var(--button-color);
    color: #fff;
    
}



.err {
	position: absolute;
	display: block;
	margin-top: 50px!important;
}



.filter-button {
  display: flex;
  align-items: center;
  column-gap: 5px;
  height: 100%;
  padding: 5px 5px;
  background-color: transparent;
  outline: none;
  /*border: solid 1px #000;
  border-radius: 3px;*/
  font-size: 14px;
  font-family: 'lumen__regular', sans-serif;
  font-feature-settings: "case" on;
  color: #000;
  transition: .25s;
 
}
.filter-button:hover {
  cursor: pointer;
  opacity: 1;
  color: #ffb700;

}
/* color of filter svg on hover*/
.filter-button:hover > svg {
 /* fill: #ffb700;*/
}
.filter-button::active > svg {
  fill: #ffb700;
}
.filter-button svg * {
	-webkit-transition: all .25s ;
  -o-transition: all .25s ;
  transition: all .25s ;
  -moz-transition: all .25s ;
  fill: #000;
  opacity: 1;
}
.icon2 {
  width: 16px;
  height: 20px;
  opacity: 0.5;
  

}

.items__button {
    position: relative;
    display: inline-block;
}

.items__button .icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    fill: currentColor; /* Use currentColor to inherit the text color */
    color: black; /* Initial color */
}

.items__button .button {
    padding-left: 40px; /* Adjust this value according to the width of the icon plus some padding */
    padding-top: 10px;
    padding-bottom: 10px;
}

.items__button:hover .icon {
    color: var(--hover-color); /* Change to desired hover color */
}

/* Filter Dropdown  */

.filter__dropdown {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 2;

  font-family: 'lumen__regular', sans-serif;
  font-size: 14px;
  margin-left: 80px;
  top: 45px;
  cursor: pointer;
}

.filter__dropdown a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

}

.filter__dropdown a:hover {
  background-color: #f1f1f1;
}

.filter-button:hover .filter__dropdown {
  display: block;
}
.filter__dropdown.show {
  display: block;
}

.filter__cats {
  right: 0px;
}

@media screen and (max-width: 767px) { 
	.filter-button {
		margin-top: 3px;
		width: 100%;
		height: 24px;
	}
	.filter__dropdown {
		margin-left: 0px;
		width: 90%;
	}
	.icon2 {
		width: 20px;
	}
}