html,
body {
	overflow-x: hidden;
	/* este apartado es para que el diseño no se desborde */
}

.product {
	position: sticky;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.products-slick .product {
	height: 420px;
	/* altura fija o ajustable */
	overflow: hidden;
	border: 1px solid #eee;
	padding: 10px;
	box-sizing: border-box;
}

.product-img {
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.product-img img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.product-body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-name,
.product-category {
	height: 20px;
	overflow: hidden;
	font-size: 14px;
}

.product-name a,
.product-category {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* Loader pequeño y delgado */
.content {
	width: 15vmin;
	height: 15vmin;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pill {
	background: transparent;
	width: 5vmin;
	height: 12vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transform: rotate(180deg);
	animation: spin 4s linear infinite;
}

@keyframes spin {
	100% {
		transform: rotate(-540deg);
	}
}

.pill .side {
	background: #0069b3;
	position: relative;
	overflow: hidden;
	width: 4vmin;
	height: 6vmin;
	border-radius: 2vmin 2vmin 0 0;
}

.pill .side+.side {
	background: #2B3F6C;
	border-radius: 0 0 2vmin 2vmin;
	border-top: 0.4vmin solid #1a4862;
	animation: open 2s ease-in-out infinite;
}

@keyframes open {

	0%,
	20%,
	80%,
	100% {
		margin-top: 0;
	}

	30%,
	70% {
		margin-top: 3vmin;
	}
}


.pill .side:before {
	content: "";
	position: absolute;
	width: 2vmin;
	height: 10vmin;
	bottom: 0;
	right: 1.5vmin;
	background: #fff2;
	border-radius: 1vmin 1vmin 0 0;
	animation: shine 1s ease-out -1s infinite alternate-reverse;
}

.pill .side+.side:before {
	top: 0;
	bottom: auto;
	border-radius: 0 0 1vmin 1vmin;
}

.pill .side+.side:after {
	top: 0;
	bottom: auto;
	border-top-width: 0;
	border-bottom-width: 0.2vmin;
}

@keyframes shine {

	0%,
	46% {
		right: 0.5vmin;
	}

	54%,
	100% {
		right: 2vmin;
	}
}

@keyframes shadow {

	0%,
	49.999% {
		transform: rotateY(0deg);
		left: 0;
	}

	50%,
	100% {
		transform: rotateY(180deg);
		left: -1vmin;
	}
}

.medicine {
	position: absolute;
	width: calc(100% - 2vmin);
	height: calc(100% - 4vmin);
	background: transparent;
	border-radius: 2vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.medicine i {
	width: 0.3vmin;
	height: 0.3vmin;
	background: #47c;
	border-radius: 50%;
	position: absolute;
	animation: medicine-dust 1.75s ease infinite alternate;
}

.medicine i:nth-child(2n + 2) {
	width: 0.5vmin;
	height: 0.5vmin;
	margin-top: -2vmin;
	margin-right: -2vmin;
	animation-delay: -0.2s;
}

.medicine i:nth-child(3n + 3) {
	width: 0.6vmin;
	height: 0.6vmin;
	margin-top: 2vmin;
	margin-right: 2vmin;
	animation-delay: -0.33s;
}

@keyframes medicine-dust {

	0%,
	100% {
		transform: translate3d(0vmin, 0vmin, -0.1vmin);
	}

	25% {
		transform: translate3d(0.25vmin, 2vmin, 0vmin);
	}

	75% {
		transform: translate3d(-0.1vmin, -2vmin, 0.25vmin);
	}
}

#productos-mes {
	position: relative;
	min-height: 400px;
}

#loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	/* background-color: rgba(255, 255, 255, 0.8); */
}


.card-white {
	position: relative;
}