.not-result-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: calc(100vh - 61px);
    justify-content: center;
	text-align: center;
}

	.not-result-icon {
		font-size: 2rem;
	}

	.not-result-title {
		font-family: var(--principal-font);
		font-weight: 600;
		font-size: 24px;
		color: rgb(0,0,0);
		text-align: center;
	}
	
/*ITEMS*/
.product-list-container {
    padding: 1rem 0;
}

	.product-list {
		display: flex;
		width: 100%;
		gap: 1rem;
		flex-wrap: wrap;
		align-content: baseline;
	}
	
	
		.product-list-item a {
			text-decoration: none;
			color: #757575;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			width: 100%;
		}

		.product-list-item {
			width: calc((100% - 1rem) / 2);
			border: 1px solid rgb(0,0,0,.1);
			padding: .875rem;
			border-radius: 4px;
			height: fit-content;
		}
		
		@media (min-width: 768px)
		{
			.product-list-item {
				width: calc((100% - 2rem) / 3);
			}
		}
		
		@media (min-width: 992px)
		{
			.product-list-item {
				width: calc((100% - 2rem) / 3);
			}
		}
		
		@media (min-width: 1200px)
		{
			.product-list-item {
				width: calc((100% - 3rem) / 4);
			}
		}
		
			.product-list-item-image {
				position: relative;
				width: 100%;
				overflow: hidden;
			}
			
			.product-list-item-image:after {
				content: "";
				display: block;
				padding-bottom: 100%;
			}

			.product-list-item-image .content {
				position: absolute;
				width: 100%;
				height: 100%;
			    z-index: -1;
				display: flex;
				align-items: center;
			}
				
				.product-list-item-image .content img {
					max-width: 100%;
					max-height: 100%;
				}
				
			.product-list-item-brand {
				font-size: 14px;
				color: #8f8f8f;
				color: #595959;
				margin: 0;
				font-weight: 400;
				text-transform: capitalize;
			}
				
			.product-list-item-name {
				font-family: var(--principal-font);
				color: var(--neutral-color-5);
				font-weight: 400;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				font-size: 14px;
				line-height: 20px;
				height: 40px;
                min-height: 40px;
				font-weight: 600;
				margin: 0;
				text-transform: capitalize;
			}
		
			@media (min-width: 400px)
			{
				.product-list-item-name {
					-webkit-line-clamp: 2;
					height: 20px;
				}
			}
			
		
			@media (min-width: 768px)
			{
				.product-list-item-name {
					-webkit-line-clamp: 2;
					font-size: 16px;
					line-height: 24px;
					height: 48px;
				}
			}
			
			.product-list-item-price {
				font-size: 14px;
				font-weight: 400;
				margin: 0;
				width: 100%;
				background-color: #f2f3f5;
				color: #525252;
				padding: 4px 8px;
				border-radius: 4px;
				text-align: center;
                text-wrap: nowrap;
			}
				.product-list-item-price b {
					color: var(--neutral-color-5);
					font-size: 14px;
					font-weight: 800;
				}
				
				
/*Filters*/
.product-list-container > .container {
	display: flex;
	gap: 1rem;
	flex-direction: column;
}
	@media (min-width: 768px)
	{
		.product-list-container > .container {
			flex-direction: row;
		}
	}
	.filter-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		font-size: 14px;
		font-weight: bold;
	}
		.filter-bar .container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0;
		}
		.filter-bar i {
			font-size: 18px;
		}
		.filter-button {
			display: flex;
			align-items: center;
			gap: 4px;
			cursor: pointer;
		}
	@media (min-width: 768px)
	{
		.filter-bar {
			display: none;
		}
	}
	
.product-filters {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
	background-color: rgb(0,0,0,.1);
	backdrop-filter: blur(2px);
	padding-right: 4rem;
    z-index: 1000;
	display: none;
    overflow-y: scroll;
}
.product-filters.expand {
	display: flex;
}
@media (min-width: 768px)
{
	.product-filters {
		position: relative;
		min-width: 25%;
		width: 25%;
		padding-right: 0;
		z-index: 1;
		height: fit-content;
		display: flex;
		background-color: white;
        overflow-y: visible;
	}
}
@media (min-width: 1200px)
{
	.product-filters {
		min-width: 20%;
		width: 20%;
	}
}

	.filter-principal-header {
		padding: 1rem 1rem 0;
		font-size: 22px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
	}

	@media (min-width: 768px)
	{
		.filter-principal-header {
			display: none;
		}
	}	
	.applied-filters {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		padding: 0 1rem;
	}
	@media (min-width: 768px)
	{
		.applied-filters {
			padding: 0;
		}
	}
		.applied-filter {
			background-color: whitesmoke;
			color: #757575;
			font-size: 14px;
			display: flex;
			align-items: center;
			gap: 4px;
			padding: 2px 6px;
			border-radius: 4px;
			text-transform: capitalize;
		}
		.applied-filter i {
			font-size: 12px;
			cursor: pointer;
			display: flex;
		}
	.filters-container {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		background-color: white;
		height: 100%;
		width: 100%;
        height: fit-content;
        min-height: 100%;
        min-height: fit-content;
        padding-bottom: 1rem;
	}
	.filter-container {
		border-top: 1px solid rgb(0,0,0,.1);
		padding: 1rem 1rem 0;
	}
	@media (min-width: 768px)
	{
		.filter-container {
			border-top: none;
			padding: 0;
		}
	}
		.filter-header {
			display: flex;
			width: 100%;
			font-size: 14px;
			margin-bottom: 4px;
		}
			.filter-name{
				font-weight: bold;
			}
			.filter-list-bt {
				margin-left: auto;
				cursor: pointer;
				display: none
			}
		select {
			-webkit-appearance: none;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='%23595955' viewBox='0 96 960 960' width='48'%3E%3Cpath d='M480 699q-6 0-11-2t-10-7L261 492q-8-8-7.5-21.5T262 449q10-10 21.5-8.5T304 450l176 176 176-176q8-8 21.5-9t21.5 9q10 8 8.5 21t-9.5 22L501 690q-5 5-10 7t-11 2Z'/%3E%3C/svg%3E");
			background-size: 1.5rem;
			background-repeat: no-repeat;
			background-position: right center;
			background-position: calc(100% - 6px) center;
			cursor: pointer;
			display: block;
			display: -webkit-box;
			max-width: 100%;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		select.select-order-by {
			/* background-color: #f5f5f5; */
			padding: 0 0.5rem;
			height: 32px;
			border-radius: 4px;
			color: #757575;
			color: #595959;
			border: 1px solid rgb(0,0,0,.1);
			width: 100%;
			font-size: 12px;
			outline: none;
			cursor: pointer;
			margin-top: 0.5rem;
		}		
		.filter-list {
			display: flex;
			flex-direction: column;
			font-size: 14px;
		}
			.filter-value {
				display: flex;
				cursor: pointer;
				font-size: 14px;
				color: #8f8f8f;
				color: #595959;
				margin-top: 0.25rem;
				align-items: center;
				user-select: none;
				text-transform: capitalize;
			}
			
		.filter-colors {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
			margin-top: 0.25rem;
		}
			.filter-color {
				width: 24px;
				height: 24px;
				background-color: whitesmoke;
				border-radius: 50%;
                border-radius: 4px;
				cursor: pointer;
                border: 1px solid rgb(0,0,0,.1);
			}
		.filter-range {
			display: flex;
			align-items: center;
			margin-top: .25rem;
		}
			.filter-range input {
				/* background-color: #f5f5f5; */
				padding: 0 0.5rem;
				height: 32px;
				border-radius: 4px;
				color: #757575;
				color: #595959;
				border: 1px solid rgb(0,0,0,.1);
				width: 50%;
				font-size: 12px;
				outline: none;
			}
			
/*PAGINADOR*/
div#paginator {
    width: 100%;
    background-color: whitesmoke;
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    user-select: none;
    border-radius: 4px;
    font-size: 14px;
    padding: 0px 16px;
}
    .prev-page.page {
        margin-right: auto;
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
    }
    .next-page.page {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
    }
    .prev-page.page:hover, .next-page.page:hover {
    }
    .page.actual {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #eeeded;
        border-radius: 4px;
        font-weight: bold;
    }
    .page.total {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
    }
    
.filter-container.grid .filter-list {
    display: flex;
    flex-wrap: wrap;
}
    .filter-container.grid .filter-list {
        display: flex;
        flex-wrap: wrap;
        margin: 0 !important;
        gap: 0.25rem;
        flex-direction: row;
    }
    .filter-container.grid .filter-list .filter-value {
        margin: 0;
        width: calc((100% - 0.5rem) / 3);
        padding: 0 0.5rem;
        height: 32px;
        border-radius: 4px;
        color: #757575;
        border: 1px solid rgb(0,0,0,.1);
        font-size: 12px;
        outline: none;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

:root{
    --color-amarillo: #f6d33d;
    --color-azul: #4e80c7;
    --color-natural: #d8cab1;
    --color-blanco: #eff0f1;
    --color-bronce: #c98583;
    --color-gris: #545865;
    --color-rojo: #de3434;
    --color-rosa: #f9dcd6;
    --color-verde: #a3d2ca;
    --color-violeta: #aeb3e1;
}