/**
 * Malu Pops — valoraciones de la ficha de producto (patrón
 * ficha-valoraciones), en la línea de «Tabla nutricional» e «Ingredientes».
 *
 * Se carga con la clase .mp-valoraciones del patrón. El titular y la
 * entradilla son los de ficha-secciones.css.
 *
 * - El bloque de valoraciones de WooCommerce es una rejilla. Con reseñas,
 *   desde 64em, a la izquierda el resumen (la media grande en morado, las
 *   estrellas, el número de reseñas y «Escribe tu reseña») fijo al desplazar,
 *   y a la derecha las reseñas en tarjetas blancas con sus comillas y el
 *   formulario en su tarjeta; por debajo, todo en una columna.
 * - Sin reseñas, el resumen no se ve y queda el formulario («Sé el primero en
 *   valorar…»), centrado y más estrecho.
 */

.mp-valoraciones {
	--mp-valoraciones-suave: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, var(--wp--preset--color--blanco));
	--mp-valoraciones-borde: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, var(--wp--preset--color--blanco));
	--mp-valoraciones-lavanda: #efeefd;
	--mp-valoraciones-estrella: #f7b20c;
	--mp-valoraciones-sombra: 0 1.5rem 3rem -1.75rem rgb(28 11 69 / 0.24), 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);

	/* Iconos (Lucide): las comillas de las reseñas, en máscara, y el mensaje del formulario, con su color. */
	--mp-comillas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2zM5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
	--mp-mensaje: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23532ad1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3Cpath d='M7.5 9.5c0 .687.265 1.383.697 1.844l3.009 3.264a1.14 1.14 0 0 0 .407.314 1 1 0 0 0 .783-.004 1.14 1.14 0 0 0 .398-.31l3.008-3.264A2.77 2.77 0 0 0 16.5 9.5 2.5 2.5 0 0 0 12 8a2.5 2.5 0 0 0-4.5 1.5'/%3E%3C/svg%3E");

	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);

	& .mp-valoraciones__resenas {
		margin-block: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0;
	}
}

/* --- Rejilla ---------------------------------------------------------------- */

.mp-valoraciones .wp-block-woocommerce-product-reviews {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 0.4rem + 1.6vw, 1.75rem);
	text-align: start;

	& > * {
		margin: 0;
	}

	/* Sin reseñas queda solo el formulario: centrado y a un ancho de lectura. */
	&:not(:has(> .wp-block-woocommerce-product-review-template)) {
		max-inline-size: 52rem;
	}
}

@media (width >= 64em) {
	.mp-valoraciones .wp-block-woocommerce-product-reviews:has(> .wp-block-woocommerce-product-review-template) {
		grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
		align-items: start;

		& > * {
			grid-column: 2;
		}

		/*
		 * El resumen, fijo al desplazar, al lado de las reseñas y el
		 * formulario (y de la paginación, si la hay): la rejilla termina con
		 * el formulario, así que no lo pisa.
		 */
		& > .mp-valoraciones__resumen {
			position: sticky;
			inset-block-start: 1.5rem;
			grid-column: 1;
			grid-row: 1 / span 2;
		}

		&:has(> .wp-block-woocommerce-product-reviews-pagination) > .mp-valoraciones__resumen {
			grid-row: 1 / span 3;
		}
	}
}

/* --- Resumen ---------------------------------------------------------------- */

.mp-valoraciones .mp-valoraciones__resumen {
	display: grid;
	justify-items: center;
	gap: 0.55rem;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1.25rem, 1rem + 1vw, 2rem);
	border-radius: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
	background-color: var(--mp-valoraciones-lavanda);
	text-align: center;

	& > * {
		margin: 0;
	}

	/* Sin reseñas WooCommerce no pinta las estrellas ni la media. */
	&:not(:has(.wc-block-components-product-rating__stars)) {
		display: none;
	}

	& .wp-block-woocommerce-product-average-rating {
		color: var(--wp--preset--color--morado);
		font-family: var(--wp--preset--font-family--coolvetica);
		font-size: clamp(3.75rem, 2.75rem + 3vw, 5.5rem);
		line-height: 0.9;
	}

	& .wc-block-components-product-rating {
		margin: 0;
	}

	& .wc-block-components-product-rating__stars {
		margin: 0 auto;
		color: var(--mp-valoraciones-estrella);
		font-size: 1.6rem;
	}

	& :is(.wc-block-components-product-rating-counter__reviews_count, .woocommerce-review-link) {
		color: var(--mp-valoraciones-suave);
		font-size: var(--wp--preset--font-size--small);
		text-decoration: none;
	}

	& .mp-valoraciones__escribir {
		justify-content: center;
		margin-block-start: 0.75rem;
	}
}

/* «Escribe tu reseña» y «Enviar»: el morado de «Comprar ahora». */
.mp-valoraciones :is(.mp-valoraciones__escribir .wp-block-button__link, .form-submit .wp-block-button__link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 3.25rem;
	margin: 0;
	padding: 0.7rem 1.75rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--pildora);
	background-color: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--coolvetica);
	font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mp-transicion), transform var(--mp-transicion);

	&:hover,
	&:focus-visible {
		background-color: var(--wp--preset--color--morado-hondo);
		color: var(--wp--preset--color--blanco);
	}

	&:active {
		transform: scale(0.98);
	}
}

/* --- Reseñas ---------------------------------------------------------------- */

.mp-valoraciones .wp-block-woocommerce-product-review-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: clamp(1rem, 0.4rem + 1.6vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;

	& > li {
		position: relative;
		display: grid;
		align-content: start;
		gap: 0.35rem;
		margin: 0;
		padding: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
		border-radius: 1.25rem;
		border: 1px solid rgb(83 42 209 / 0.12);
		background-color: color-mix(in srgb, var(--wp--preset--color--azul) 22%, white);
		box-shadow: none;

		&.mp-team--chocolate { background-color: color-mix(in srgb, var(--wp--preset--color--coral) 20%, white); }
        &.mp-team--vainilla { background-color: color-mix(in srgb, var(--wp--preset--color--azul) 28%, white); }

		& > * {
			margin: 0;
		}

		/* Las comillas, arriba a la derecha. */
		&::after {
			content: "";
			position: absolute;
			inset-block-start: clamp(1.1rem, 0.8rem + 0.8vw, 1.5rem);
			inset-inline-end: clamp(1.1rem, 0.8rem + 0.8vw, 1.5rem);
			inline-size: 2.25rem;
			aspect-ratio: 1;
			background-color: var(--wp--preset--color--morado);
			opacity: 0.22;
			-webkit-mask: var(--mp-comillas) center / contain no-repeat;
			mask: var(--mp-comillas) center / contain no-repeat;
			pointer-events: none;
		}
	}

	/* Nombre y estrellas, uno bajo otro; a la derecha, el hueco de las comillas. */
	& .mp-resena__cabecera {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3rem;
		margin: 0;
		padding-inline-end: 3rem;
	}

	& .wp-block-woocommerce-product-review-author-name {
		color: var(--wp--preset--color--contrast);
		font-family: var(--wp--preset--font-family--coolvetica);
		font-size: var(--wp--preset--font-size--large);
		line-height: 1.1;
	}

	& .wc-block-product-review-rating__stars {
		margin: 0;
		color: var(--mp-valoraciones-estrella);
		font-size: 1.05rem;
	}

	& .wp-block-woocommerce-product-review-date {
		color: var(--mp-valoraciones-suave);
		font-size: var(--wp--preset--font-size--x-small);

		& a {
			color: inherit;
			text-decoration: none;
		}
	}

	& .wp-block-woocommerce-product-review-content {
		margin-block-start: 0.4rem;
		color: var(--wp--preset--color--contrast);
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.55;

		& p {
			margin: 0;
		}
	}
}

.mp-valoraciones .wp-block-woocommerce-product-reviews-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;

	& :is(a, span) {
		display: inline-grid;
		place-items: center;
		min-inline-size: 2.75rem;
		min-block-size: 2.75rem;
		padding-inline: 0.75rem;
		border-radius: var(--wp--preset--border-radius--pildora);
		color: var(--wp--preset--color--contrast);
		font-weight: 500;
		text-decoration: none;
	}

	& a:hover {
		background-color: var(--mp-valoraciones-lavanda);
	}

	& .current {
		background-color: var(--wp--preset--color--morado);
		color: var(--wp--preset--color--blanco);
	}
}

/* --- Formulario ------------------------------------------------------------- */

/* La tarjeta: el envoltorio del bloque (WooCommerce no le pone clase). */
.mp-valoraciones [id="review_form_wrapper"] {
	padding: clamp(1.25rem, 0.8rem + 1.3vw, 2.25rem);
	border-radius: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
	background-color: var(--wp--preset--color--blanco);
	box-shadow: var(--mp-valoraciones-sombra);
}

.mp-valoraciones .wp-block-woocommerce-product-review-form {
	margin: 0;
	color: var(--wp--preset--color--contrast);

	/* «Añadir una valoración» o «Sé el primero en valorar…», con su icono como los títulos de las tarjetas. */
	& .comment-reply-title {
		display: flex;
		align-items: center;
		gap: clamp(0.85rem, 0.5rem + 1vw, 1.25rem);
		margin-block-end: 1.1rem;
		font-family: var(--wp--preset--font-family--coolvetica);
		font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem);
		font-weight: 400;
		line-height: 1.05;
		text-wrap: balance;

		&::before {
			content: "";
			flex: none;
			inline-size: clamp(3rem, 2.4rem + 1.8vw, 4.25rem);
			aspect-ratio: 1;
			border-radius: 50%;
			background: #e5eafe var(--mp-mensaje) center / 46% no-repeat;
		}
	}

	& .comment-form {
		display: grid;
		gap: 1rem;

		& > * {
			margin: 0;
		}
	}

	& .comment-notes {
		color: var(--mp-valoraciones-suave);
		font-size: var(--wp--preset--font-size--x-small);
	}

	& label {
		display: block;
		margin-block-end: 0.35rem;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
	}

	& :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
		box-sizing: border-box;
		inline-size: 100%;
		padding: 0.75rem 1rem;
		border: 1.5px solid var(--mp-valoraciones-borde);
		border-radius: 1rem;
		background-color: var(--wp--preset--color--blanco);
		color: var(--wp--preset--color--contrast);
		font: inherit;

		/* 16 px como mínimo: con menos, iOS Safari amplía la página al tocarlo. */
		font-size: max(1rem, var(--wp--preset--font-size--small));

		&:focus-visible {
			border-color: var(--wp--preset--color--morado);
			outline-offset: 1px;
		}
	}

	/* WooCommerce le da 8 filas: con 9rem basta, y se puede estirar. */
	& textarea {
		block-size: 9rem;
		min-block-size: 6rem;
		resize: vertical;
	}

	/* Las estrellas de la puntuación, grandes. */
	& .comment-form-rating .stars {
		display: inline-flex;
		gap: 0.2rem;
	}

	& .comment-form-rating .stars button {
		padding: 0.15rem;
		color: var(--mp-valoraciones-estrella);

		& svg {
			inline-size: 2rem;
			block-size: 2rem;
		}
	}

	& .comment-form-cookies-consent {
		display: flex;
		align-items: flex-start;
		gap: 0.6rem;
		color: var(--mp-valoraciones-suave);
		font-size: var(--wp--preset--font-size--x-small);

		& input {
			margin: 0.2em 0 0;
			accent-color: var(--wp--preset--color--morado);
		}

		& label {
			display: inline;
			margin: 0;
			font-size: inherit;
			font-weight: 400;
		}
	}

	& .form-submit {
		margin: 0;
	}
}

@media (width >= 40em) {
	.mp-valoraciones .wp-block-woocommerce-product-review-form .comment-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.25rem;

		& > :not(.comment-form-author, .comment-form-email) {
			grid-column: 1 / -1;
		}
	}
}

@media (forced-colors: active) {
	.mp-valoraciones :is(.mp-valoraciones__resumen, [id="review_form_wrapper"]),
	.mp-valoraciones .wp-block-woocommerce-product-review-template > li {
		border: 1px solid CanvasText;
	}
}


/* Familias de color: cálidos para chocolate; azul y celeste para vainilla. */
.mp-team--chocolate { --mp-team-tono: var(--wp--preset--color--naranja); --mp-team-suave: var(--wp--preset--color--coral); }
.mp-team--vainilla { --mp-team-tono: var(--wp--preset--color--morado); --mp-team-suave: var(--wp--preset--color--azul); }
.mp-teams { margin-block: 2.5rem 0; text-align: start; }
.mp-teams__intro > span { font-size: 0.75rem; letter-spacing: 0.12em; font-weight: 600; color: var(--wp--preset--color--morado); }
.mp-teams__intro h3 { margin: 0.5rem 0; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; text-transform: none; }
.mp-teams__intro p { margin: 0; }
.mp-teams__marcador { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1.5rem; }
.mp-teams__equipo {
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: center;
 gap: 0.25rem 1rem;
 padding: clamp(1.25rem, 3vw, 2rem);
 border: 1px solid color-mix(in srgb, var(--mp-team-tono) 30%, white);
 border-radius: 1.5rem;
 color: var(--wp--preset--color--contrast);
 background: linear-gradient(120deg, color-mix(in srgb, var(--mp-team-suave) 65%, white), color-mix(in srgb, var(--mp-team-suave) 25%, white));
 text-decoration: none;
 transition: translate 180ms ease;
}
.mp-teams__equipo:hover { translate: 0 -3px; }
.mp-teams__equipo > span { font-size: clamp(1.15rem, 2.2vw, 1.75rem); font-weight: 600; }
.mp-teams__equipo strong { grid-column: 2; grid-row: 1 / 3; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; }
.mp-teams__equipo small { font-size: 0.875rem; }
.mp-teams__filtros { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.mp-teams__filtros a {
 display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
 padding: 0.5rem 1rem; border: 1px solid var(--mp-valoraciones-borde); border-radius: 999px;
 font-size: 0.9375rem; color: var(--wp--preset--color--contrast); text-decoration: none; background: white;
}
.mp-teams__filtros a[aria-current] { background: var(--wp--preset--color--contrast); color: white; }
.mp-team-etiqueta { display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--mp-team-suave); color: var(--wp--preset--color--contrast); font-size: 0.75rem; font-weight: 600; }
.mp-valoraciones .wp-block-woocommerce-product-review-template > li::after { background: var(--mp-team-tono, var(--wp--preset--color--morado)); }

/* Formulario: selección de sabor, estrellas y espacio para una opinión propia. */
.mp-valoraciones [id="review_form_wrapper"] {
 border: 1px solid color-mix(in srgb, var(--wp--preset--color--azul) 70%, white);
 border-radius: 2rem;
 padding: clamp(1.25rem, 3vw, 2.5rem);
 background: linear-gradient(155deg, color-mix(in srgb, var(--wp--preset--color--azul) 25%, white), white 60%);
 box-shadow: none;
}
.mp-valoraciones .wp-block-woocommerce-product-review-form .comment-reply-title { font-size: clamp(2rem, 3.5vw, 3.25rem); color: var(--wp--preset--color--contrast); }
.mp-valoraciones .wp-block-woocommerce-product-review-form .comment-reply-title::before { content: none; }
.mp-resena-invitacion { font-size: 1.0625rem; line-height: 1.55; margin: 0 0 1rem; }
.mp-team-selector { padding: 0; margin: 0; border: 0; min-width: 0; }
.mp-team-selector legend { padding: 0; margin-bottom: 0.75rem; font-weight: 600; font-size: 1rem; }
.mp-team-selector__opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.mp-valoraciones .mp-team-opcion {
 display: flex; align-items: flex-start; gap: 0.5rem; margin: 0;
 padding: 1rem; border: 2px solid transparent; border-radius: 1rem; cursor: pointer;
 background: color-mix(in srgb, var(--mp-team-suave) 30%, white);
}
.mp-team-opcion input { flex: none; margin: 0.2rem 0 0; accent-color: var(--mp-team-tono); width: 1.15rem; height: 1.15rem; }
.mp-team-opcion strong, .mp-team-opcion small { display: block; }
.mp-team-opcion small { margin-top: 0.35rem; font-weight: 400; font-size: 0.75rem; }
.mp-team-opcion:has(input:checked) { border-color: var(--mp-team-tono); background: color-mix(in srgb, var(--mp-team-suave) 60%, white); }
.mp-team-opcion:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 3px; }
.mp-valoraciones .wp-block-woocommerce-product-review-form textarea { min-height: 10rem; }
.mp-valoraciones .form-submit .wp-block-button__link { width: 100%; min-height: 3.5rem; }
@media (width < 40em) {
 .mp-teams__marcador, .mp-team-selector__opciones { grid-template-columns: 1fr; }
 .mp-teams__equipo { border-radius: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .mp-teams__equipo { transition: none; } }

.mp-resena-emojis { display: none; }
.mp-emojis-activos .mp-resena-emojis {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-block-start: 0.75rem;
}
.mp-resena-emojis__texto {
	flex-basis: 100%;
	font-size: 0.8125rem;
	color: var(--mp-valoraciones-suave);
}
.mp-resena-emojis button {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--azul) 65%, white);
	border-radius: 0.875rem;
	background: white;
	font-size: 1.4rem;
	cursor: pointer;
}
.mp-resena-emojis button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--azul) 35%, white);
	border-color: var(--wp--preset--color--morado);
}
.mp-resena-emojis button:focus-visible {
	outline: 2px solid var(--wp--preset--color--morado);
	outline-offset: 2px;
}