.miau-pgrid-wrapper {
	width: 100%;
}

.miau-pgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 40px;
	row-gap: 90px;
	width: 100%;
}

/* Primera fila más corta y centrada (pirámide) ------------------------
   Se dobla la rejilla en medias columnas y cada tarjeta ocupa dos. Así la
   fila corta puede arrancar en una media columna y queda centrada sobre la
   de abajo, sin cambiar el ancho de las tarjetas.

   Con 3 columnas y 2 arriba: 6 medias, la primera tarjeta empieza en la 2 y
   ocupa 2 y 3; la segunda coge 4 y 5; la sexta se queda libre y no cabe otra
   tarjeta, así que la tercera baja sola. El `grid-column: 1` de la tarjeta que
   abre la segunda fila lo deja explícito en vez de fiarlo al reparto automático.

   El `!important` es necesario: Elementor escribe grid-template-columns con
   selectores de más peso (.elementor-NNNN .elementor-element-XXX .miau-pgrid).

   Solo en escritorio: por debajo de 1025px Elementor ya baja el número de
   columnas y la pirámide deja de tener sentido. */
@media (min-width: 1025px) {

	.miau-pgrid--piramide > .miau-pgrid__card {
		grid-column: span 2;
	}

	.miau-pgrid--cols-2 { grid-template-columns: repeat(4, 1fr) !important; }
	.miau-pgrid--cols-3 { grid-template-columns: repeat(6, 1fr) !important; }
	.miau-pgrid--cols-4 { grid-template-columns: repeat(8, 1fr) !important; }

	/* Primera tarjeta: empieza en (columnas - primera fila + 1). */
	.miau-pgrid--cols-2.miau-pgrid--fila1-1 > .miau-pgrid__card:first-child { grid-column: 2 / span 2; }
	.miau-pgrid--cols-3.miau-pgrid--fila1-1 > .miau-pgrid__card:first-child { grid-column: 3 / span 2; }
	.miau-pgrid--cols-3.miau-pgrid--fila1-2 > .miau-pgrid__card:first-child { grid-column: 2 / span 2; }
	.miau-pgrid--cols-4.miau-pgrid--fila1-1 > .miau-pgrid__card:first-child { grid-column: 4 / span 2; }
	.miau-pgrid--cols-4.miau-pgrid--fila1-2 > .miau-pgrid__card:first-child { grid-column: 3 / span 2; }
	.miau-pgrid--cols-4.miau-pgrid--fila1-3 > .miau-pgrid__card:first-child { grid-column: 2 / span 2; }

	/* Tarjeta que abre la segunda fila: pegada a la izquierda. */
	.miau-pgrid--fila1-1 > .miau-pgrid__card:nth-child(2) { grid-column: 1 / span 2; }
	.miau-pgrid--fila1-2 > .miau-pgrid__card:nth-child(3) { grid-column: 1 / span 2; }
	.miau-pgrid--fila1-3 > .miau-pgrid__card:nth-child(4) { grid-column: 1 / span 2; }
}

.miau-pgrid__card {
	display: none;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.miau-pgrid__card.is-active {
	display: flex;
}

.miau-pgrid__card,
.miau-pgrid__card:hover,
.miau-pgrid__card:focus,
.miau-pgrid__card:visited {
	text-decoration: none;
}

.miau-pgrid__media {
	position: relative;
	width: 100%;
	aspect-ratio: 383 / 379;
	overflow: hidden;
	border-radius: 20px;
	/* Blanco, no gris: este fondo es la tarjeta que se ve. Antes lo tapaba la
	   propia foto al ocupar el 100%, y el gris no llegaba a verse nunca. */
	background: #fff;
}

/* `contain` y no `cover`: las fotos son verticales (2:3) dentro de una caja casi
   cuadrada, así que `cover` recortaba el envase por arriba y por abajo. Con
   `contain` cabe entero y sobra fondo blanco a los lados, que es el diseño.
   La imagen vuelve al 100% de ancho para que el `overflow: hidden` de la caja
   recorte sus esquinas: es lo que dibuja la tarjeta redondeada. */
.miau-pgrid__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform 0.5s ease;
}

.miau-pgrid__card:hover .miau-pgrid__media img {
	transform: scale(1.03);
}

.miau-pgrid__title {
	margin: 43px 0 0;
	padding: 0;
	color: #003CA5;
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 25px;
	line-height: 1.2;
	letter-spacing: -0.8px;
}

.miau-pgrid__desc {
	margin: 15px 0 0;
	padding: 0;
	color: rgba(5, 5, 5, 0.8);
	font-family: 'Albert Sans', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.32px;
}

/* Filtro por tipo (pills) -------------------------------------------- */

.miau-pfilter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 0 0 60px;
}

.miau-pfilter__pill {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
	padding: 14px 34px;
	border-radius: 999px;
	background: #E7002A;
	color: #FFFFFF;
	font-family: 'Outfit', sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1;
	letter-spacing: -0.4px;
	transition: background-color 0.25s ease;
}

.miau-pfilter__pill:hover:not(.is-active),
.miau-pfilter__pill:focus-visible:not(.is-active) {
	background: #C40023;
	outline: none;
}

.miau-pfilter__pill.is-active {
	background: #003CA5;
	cursor: default;
}

/* Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
	.miau-pgrid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 60px;
	}
}

@media (max-width: 767px) {
	.miau-pgrid {
		grid-template-columns: 1fr;
		row-gap: 64px;
		column-gap: 0;
	}

	.miau-pgrid__title {
		margin-top: 31px;
		font-size: 25px;
		letter-spacing: -0.8px;
	}

	.miau-pgrid__desc {
		margin-top: 18px;
		font-size: 20px;
		letter-spacing: -0.32px;
	}

	.miau-pfilter {
		gap: 12px;
		margin-bottom: 40px;
	}

	.miau-pfilter__pill {
		padding: 12px 26px;
		font-size: 18px;
	}
}

/* Badge de formatos (1 kg / 5 kg) en la tarjeta ----------------------- */
/* Solo aparece en productos variables: lo pinta el widget si el producto tiene
   variaciones publicadas. `.miau-pgrid__media` ya es `position: relative`. */

.miau-pgrid__formatos {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	pointer-events: none;
}

.miau-pgrid__formato {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 50px;
	background: #003CA5;
	color: #FFFFFF;
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.2px;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.miau-pgrid__formato {
		font-size: 11px;
		padding: 3px 9px;
	}
}