/* =================================================================
   Selector de formato (1 kg / 5 kg…) en la ficha de producto.
   Va justo encima de la tabla nutricional.
   ================================================================= */

.miau-formatos {
	margin: 0 0 24px;
}

.miau-formatos__etiqueta {
	display: block;
	margin-bottom: 10px;
	color: #003CA5;
	font-family: "Outfit", sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.32px;
	text-transform: uppercase;
}

.miau-formatos__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.miau-formatos__btn {
	flex: 0 0 auto;
	min-width: 96px;
	padding: 12px 26px;
	border: 2px solid #003CA5;
	border-radius: 50px;
	background: transparent;
	color: #003CA5;
	font-family: "Outfit", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.32px;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.miau-formatos__btn:hover {
	background: rgba(0, 60, 165, 0.08);
}

.miau-formatos__btn:active {
	transform: translateY(1px);
}

.miau-formatos__btn.is-active {
	background: #003CA5;
	color: #fff;
}

.miau-formatos__btn:focus-visible {
	outline: 2px solid #E7002A;
	outline-offset: 2px;
}

/* El rosa de hello-biz -----------------------------------------------
   El tema padre pinta TODO <button> con su rosa corporativo:

     [type=button]              → border: 1px solid #c36; color: #c36
     [type=button]:hover/:focus → background-color: #c36; color: #fff

   `[type=button]` es un selector de atributo, así que puntúa (0,1,0),
   exactamente igual que `.miau-formatos__btn`. Empate → gana el que va
   después, y `theme.css` de hello-biz se encola detrás de esta hoja. De ahí
   el borde y el texto rosas en reposo, y el relleno rosa al pasar el ratón o
   después de hacer clic (el `:focus` se queda pegado).

   Se recupera el color añadiendo el contenedor al selector: (0,2,0) en reposo
   y (0,3,0) en hover, focus y activo, que ya le ganan. El rosa pasa a rojo de
   marca; el formato seleccionado se queda con el azul.                    */

.miau-formatos .miau-formatos__btn {
	border-color: #E7002A;
	color: #E7002A;
}

.miau-formatos .miau-formatos__btn:hover,
.miau-formatos .miau-formatos__btn:focus {
	background-color: #E7002A;
	color: #fff;
}

/* El activo manda sobre hover y focus: si no, el formato elegido se volvía
   rosa —ahora rojo— en cuanto lo tocabas, y se perdía la señal de "este es". */
.miau-formatos .miau-formatos__btn.is-active,
.miau-formatos .miau-formatos__btn.is-active:hover,
.miau-formatos .miau-formatos__btn.is-active:focus {
	border-color: #003CA5;
	background-color: #003CA5;
	color: #fff;
}

/* Fundido al cambiar de formato: la imagen y la tabla se atenúan un instante
   para que el cambio se perciba y no parezca un salto.

   El `:not(.zoomImg)` no es cosmético. El zoom de WooCommerce (jquery.zoom)
   inyecta su ampliación como <img class="zoomImg"> DENTRO de
   .woocommerce-product-gallery__image, y la funde animando la opacidad en línea
   con jQuery. Si además le cae esta transición, cada valor que escribe jQuery lo
   vuelve a animar el CSS: la animación no converge nunca y el zoom parpadea. */
.miau-formatos-cambiando .woocommerce-product-gallery__image img:not(.zoomImg),
.miau-formatos-cambiando .miau-nutricion-card {
	opacity: 0.35;
	transition: opacity 0.18s ease;
}

.woocommerce-product-gallery__image img:not(.zoomImg),
.miau-nutricion-card {
	transition: opacity 0.25s ease;
}

@media (max-width: 767px) {
	.miau-formatos__btn {
		flex: 1 1 auto;
		min-width: 0;
		padding: 12px 18px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.miau-formatos__btn,
	.woocommerce-product-gallery__image img,
	.miau-nutricion-card {
		transition: none;
	}
}

/* Cinturón: aunque alguna hoja de terceros vuelva a poner una transición sobre
   las imágenes de la galería, la del zoom se queda fuera. Sin esto el fallo
   reaparece en cuanto alguien toque ese selector. */
.woocommerce-product-gallery__image img.zoomImg {
	transition: none !important;
}