/**
 * Super — Tienda: el layout de los componentes propios.
 *
 * ── Mobile-first, sin negociación ───────────────────────────────────────────
 *
 * Todo lo de acá se escribió primero para 380px de ancho, que es la pantalla
 * de referencia del piloto. Las media queries sólo van hacia arriba
 * (`min-width`) y lo que hacen es **agregar** columnas y aire, nunca reordenar:
 * el desktop es la adaptación.
 *
 * Ningún target táctil baja de `--wp--custom--toque` (44px). Nada depende de
 * `:hover`, porque en un teléfono el hover no existe: cada estado que importa
 * tiene además una forma visible sin puntero (color de fondo, marca, borde).
 *
 * ── Ningún color literal ────────────────────────────────────────────────────
 *
 * Todos salen de las custom properties que genera `theme.json`
 * (`--wp--custom--marca--*`, que son alias de los presets de la paleta). Cambiar
 * el rojo en Apariencia → Editor cambia toda la tienda sin tocar este archivo.
 */

/* ══ Caja ══════════════════════════════════════════════════════════════════ */

/*
 * WordPress **no** trae un reset global de `box-sizing`: cada bloque del core
 * y de WooCommerce se lo pone a sí mismo (`.wp-block-group`,
 * `.wp-block-site-title`, las hojas de WooCommerce…), y lo que no es un bloque
 * queda en `content-box`.
 *
 * Sin esto, `.st-comprar__boton` —`width: 100%` más 14px de padding a cada lado
 * más 1px de borde— medía 30px más que la tarjeta que lo contiene: a 380px, un
 * botón de 180,8px adentro de una caja de 150,8px. `.st-tarjeta` tiene
 * `overflow: hidden`, así que no se veía como un desborde de la página sino
 * como una pastilla roja cortada por los dos lados.
 *
 * El reset va sobre las clases propias y no sobre `*`: cambiarle el modelo de
 * caja a los bloques de WooCommerce es pedir que algo se rompa en una pantalla
 * que no estamos mirando.
 */
[class^="st-"],
[class*=" st-"],
[class^="st-"]::before,
[class^="st-"]::after {
	box-sizing: border-box;
}

/* ══ Secciones y grillas ═══════════════════════════════════════════════════ */

.st-seccion {
	margin-block: var(--wp--preset--spacing--50);
}

.st-seccion__titulo {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 var(--wp--preset--spacing--30);
}

/*
 * Dos columnas en mobile. No es `auto-fill`: dos columnas es la decisión, y
 * `auto-fill` con un mínimo daría una sola columna en las pantallas más
 * angostas, que es justo donde más se nota tener que scrollear el doble.
 */
.st-grilla--columnas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 600px) {
	.st-grilla--columnas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
	}
}

@media (min-width: 900px) {
	.st-grilla--columnas {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.st-grilla--columnas {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/*
 * La fila horizontal de "Volver a comprar". Se desliza con el dedo y engancha
 * en cada tarjeta, que es lo que hace que no quede media tarjeta cortada al
 * soltar. El scrollbar se esconde sólo en los navegadores que lo dibujan
 * encima; donde ocupa lugar, se deja.
 */
.st-grilla--fila {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(9.5rem, 9.5rem);
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: var(--wp--preset--spacing--20);
}

.st-grilla--fila > * {
	scroll-snap-align: start;
}

/*
 * En mobile la fila sangra hasta el borde de la pantalla: media tarjeta
 * asomando en el margen es la señal de que hay más para el costado, y es
 * gratis. Sólo hasta 600px, porque en una pantalla ancha el contenido está
 * centrado y la sangría dejaría esta fila más ancha que todo lo demás sin
 * ningún motivo.
 *
 * El valor del margen negativo es exactamente el padding lateral de la página
 * (`--wp--style--root--padding-*`, que theme.json pone en el contenedor
 * `.has-global-padding` de arriba), así que llega justo al borde y nunca lo
 * pasa: no puede provocar scroll horizontal.
 */
@media (max-width: 599px) {
	.st-grilla--fila {
		margin-inline: calc(-1 * var(--wp--style--root--padding-left)) calc(-1 * var(--wp--style--root--padding-right));
		padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
		scroll-padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
	}
}

@media (min-width: 600px) {
	.st-grilla--fila {
		grid-auto-columns: minmax(11rem, 11rem);
	}
}

.st-grilla__aviso:empty {
	display: none;
}

.st-grilla__aviso {
	color: var(--wp--custom--marca--gris);
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--30) 0 0;
	text-align: center;
}

.st-vacio {
	color: var(--wp--custom--marca--gris);
	margin: var(--wp--preset--spacing--40) 0;
}

/* ══ Tarjeta de producto ═══════════════════════════════════════════════════ */

.st-tarjeta {
	background: var(--wp--custom--marca--blanco);
	border: 1px solid var(--wp--custom--marca--borde);
	border-radius: var(--wp--custom--radio--medio);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: var(--wp--preset--spacing--20);
	position: relative;
}

.st-tarjeta__enlace {
	color: inherit;
	display: block;
	text-decoration: none;
}

.st-tarjeta__enlace:hover .st-tarjeta__nombre,
.st-tarjeta__enlace:focus-visible .st-tarjeta__nombre {
	text-decoration: underline;
}

.st-tarjeta__foto {
	aspect-ratio: 1 / 1;
	background: var(--wp--custom--marca--fondo);
	border-radius: var(--wp--custom--radio--chico);
	display: block;
	overflow: hidden;
	position: relative;
}

.st-tarjeta__imagen {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.st-tarjeta__oferta {
	background: var(--wp--custom--marca--rojo);
	border-radius: var(--wp--custom--radio--pastilla);
	color: var(--wp--custom--marca--blanco);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	inset-block-start: 6px;
	inset-inline-start: 6px;
	line-height: 1;
	padding: 5px 9px;
	position: absolute;
}

.st-tarjeta__nombre {
	/*
	 * Tres líneas y después puntos suspensivos. Menos corta nombres que en un
	 * supermercado son necesarios ("Alimento para perro adulto Dog Chow 15 kg"
	 * no sobrevive a dos líneas), y más desalinea las filas de la grilla.
	 */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	display: -webkit-box;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.3;
	margin: var(--wp--preset--spacing--20) 0 0;
	overflow: hidden;
}

.st-tarjeta__precio {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.25;
	margin-block: var(--wp--preset--spacing--20) auto;
	padding-block-end: var(--wp--preset--spacing--20);
}

.st-tarjeta__precio del {
	color: var(--wp--custom--marca--gris);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	margin-inline-end: 4px;
}

.st-tarjeta__precio ins {
	background: none;
	text-decoration: none;
}

/*
 * El precio por unidad de medida lo pinta `super-catalogo` pegado al precio,
 * en línea. En una tarjeta de 170px eso lo dejaría partido al medio: acá pasa a
 * ocupar su propio renglón, que es una decisión de layout de esta tarjeta y no
 * del plugin.
 */
.st-tarjeta__precio .super-cat-pum,
.st-ficha__precio .super-cat-pum {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	margin-block-start: 2px;
	opacity: 1;
	color: var(--wp--custom--marca--gris);
	white-space: normal;
}

/* ══ Botón de compra ═══════════════════════════════════════════════════════ */

.st-comprar {
	margin-block-start: auto;
}

.st-comprar__forma {
	margin: 0;
}

.st-comprar__boton {
	align-items: center;
	background: var(--wp--custom--marca--rojo);
	border: 1px solid var(--wp--custom--marca--rojo);
	border-radius: var(--wp--custom--radio--pastilla);
	color: var(--wp--custom--marca--blanco);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	gap: 6px;
	justify-content: center;
	line-height: 1;
	min-height: var(--wp--custom--toque);
	padding: 0 14px;
	text-decoration: none;
	width: 100%;
}

.st-comprar__boton:hover,
.st-comprar__boton:focus-visible {
	background: var(--wp--custom--marca--rojo-oscuro);
	border-color: var(--wp--custom--marca--rojo-oscuro);
	color: var(--wp--custom--marca--blanco);
	text-decoration: none;
}

.st-comprar__mas {
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1;
}

/* Ya elegido: se invierte, para que se distinga de un botón sin usar aun sin
   leer el texto. */
.st-comprar__boton--elegido {
	background: var(--wp--custom--marca--rojo-suave);
	border-color: var(--wp--custom--marca--rojo);
	color: var(--wp--custom--marca--rojo-oscuro);
}

.st-comprar__boton--elegido:hover,
.st-comprar__boton--elegido:focus-visible {
	background: var(--wp--custom--marca--rojo-suave);
	border-color: var(--wp--custom--marca--rojo-oscuro);
	color: var(--wp--custom--marca--rojo-oscuro);
}

.st-comprar__boton--agotado {
	background: var(--wp--custom--marca--fondo);
	border-color: var(--wp--custom--marca--borde);
	color: var(--wp--custom--marca--gris);
	cursor: default;
}

.st-comprar__marca {
	font-weight: 700;
}

.st-comprar__texto {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* El respaldo sin JavaScript de la ficha: un select de verdad. */
.st-comprar__etiqueta {
	display: block;
	font-weight: 600;
	margin-block-end: 6px;
}

.st-comprar__select {
	border: 1px solid var(--wp--custom--marca--borde);
	border-radius: var(--wp--custom--radio--chico);
	display: block;
	/* 16px es el mínimo para que iOS no haga zoom al enfocar un campo. */
	font-size: 16px;
	margin-block-end: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--toque);
	padding: 0 12px;
	width: 100%;
}

/* ══ El "− N +" ════════════════════════════════════════════════════════════ */

.st-paso {
	align-items: center;
	background: var(--wp--custom--marca--rojo);
	border-radius: var(--wp--custom--radio--pastilla);
	color: var(--wp--custom--marca--blanco);
	display: flex;
	justify-content: space-between;
	min-height: var(--wp--custom--toque);
	width: 100%;
}

.st-paso__boton {
	background: none;
	border: 0;
	border-radius: var(--wp--custom--radio--pastilla);
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	/* El target completo es de 44px aunque el glifo sea chico. */
	min-height: var(--wp--custom--toque);
	min-width: var(--wp--custom--toque);
	padding: 0;
}

.st-paso__boton:disabled {
	cursor: default;
	opacity: 0.45;
}

.st-paso__numero {
	font-size: var(--wp--preset--font-size--medium);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	min-width: 1.5em;
	text-align: center;
}

/* Dentro del resumen del carrito el control convive con más cosas y no debe
   ocupar todo el ancho. */
.st-linea .st-paso {
	background: var(--wp--custom--marca--rojo-suave);
	color: var(--wp--custom--marca--rojo-oscuro);
	width: auto;
}

/* ══ Panel de pesos ════════════════════════════════════════════════════════ */

.st-pesos__titulo {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.st-pesos--inline .st-pesos__titulo {
	font-size: var(--wp--preset--font-size--large);
}

.st-pesos__lista {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
}

.st-pesos__item {
	align-items: center;
	border: 1px solid var(--wp--custom--marca--borde);
	border-radius: var(--wp--custom--radio--medio);
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	min-height: var(--wp--custom--toque);
	padding: 8px 8px 8px 14px;
}

.st-pesos__item--elegido {
	background: var(--wp--custom--marca--rojo-suave);
	border-color: var(--wp--custom--marca--rojo);
}

.st-pesos__etiqueta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.st-pesos__peso {
	font-weight: 700;
}

.st-pesos__precio {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.st-pesos__banda {
	color: var(--wp--custom--marca--gris);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.35;
}

.st-pesos__agregar {
	background: var(--wp--custom--marca--rojo);
	border: 0;
	border-radius: var(--wp--custom--radio--pastilla);
	color: var(--wp--custom--marca--blanco);
	cursor: pointer;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	min-height: var(--wp--custom--toque);
	padding: 0 18px;
}

.st-pesos__agregar:hover,
.st-pesos__agregar:focus-visible {
	background: var(--wp--custom--marca--rojo-oscuro);
}

/*
 * La banda de tolerancia. No es letra chica: va al mismo tamaño que el resto
 * del texto de la ficha y con fondo propio, porque es la respuesta a la
 * pregunta que se hace cualquiera que compra carne por internet por primera
 * vez.
 */
.st-pesos__nota,
.st-datos__banda {
	background: var(--wp--custom--marca--rojo-suave);
	border-radius: var(--wp--custom--radio--chico);
	color: var(--wp--custom--marca--tinta);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 10px 12px;
}

/* ══ Hoja inferior ═════════════════════════════════════════════════════════ */

/*
 * Anclada abajo y a ancho completo en mobile: el borde inferior es donde llega
 * el pulgar. En pantallas anchas se centra y se limita, porque una hoja de
 * 1200px de ancho para elegir entre cuatro pesos es una pantalla vacía.
 */
.st-hoja {
	align-items: flex-end;
	background: rgba(26, 26, 26, 0.45);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: var(--wp--custom--capa--panel);
}

.st-hoja__caja {
	background: var(--wp--custom--marca--blanco);
	border-radius: var(--wp--custom--radio--grande) var(--wp--custom--radio--grande) 0 0;
	box-shadow: var(--wp--custom--sombra--panel);
	max-height: 85vh;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--40);
	padding-bottom: max(var(--wp--preset--spacing--40), env(safe-area-inset-bottom));
	position: relative;
	width: 100%;
}

@media (min-width: 600px) {
	.st-hoja {
		align-items: center;
	}

	.st-hoja__caja {
		border-radius: var(--wp--custom--radio--grande);
		max-width: 26rem;
	}
}

.st-hoja__cerrar {
	background: none;
	border: 0;
	color: var(--wp--custom--marca--gris);
	cursor: pointer;
	font-size: 1.6rem;
	inset-block-start: 4px;
	inset-inline-end: 4px;
	line-height: 1;
	min-height: var(--wp--custom--toque);
	min-width: var(--wp--custom--toque);
	position: absolute;
}

.st-hoja__listo {
	background: var(--wp--custom--marca--tinta);
	border: 0;
	border-radius: var(--wp--custom--radio--pastilla);
	color: var(--wp--custom--marca--blanco);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin-block-start: var(--wp--preset--spacing--40);
	min-height: var(--wp--custom--toque);
	width: 100%;
}

/* ══ Barra de carrito ══════════════════════════════════════════════════════ */

.st-barra {
	background: var(--wp--custom--marca--blanco);
	border-block-start: 1px solid var(--wp--custom--marca--borde);
	box-shadow: var(--wp--custom--sombra--barra);
	inset-block-end: 0;
	inset-inline: 0;
	padding-bottom: env(safe-area-inset-bottom);
	position: fixed;
	z-index: var(--wp--custom--capa--barra);
}

.st-barra[hidden] {
	display: none;
}

.st-barra__interior {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
	padding-inline: var(--wp--style--root--padding-right);
}

.st-barra__abrir {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: inherit;
	gap: var(--wp--preset--spacing--30);
	min-height: 56px;
	padding: 8px 0;
	text-align: start;
	text-decoration: none;
	width: 100%;
}

.st-barra__icono {
	align-items: center;
	background: var(--wp--custom--marca--rojo);
	border-radius: var(--wp--custom--radio--pastilla);
	color: var(--wp--custom--marca--blanco);
	display: flex;
	flex: 0 0 auto;
	height: var(--wp--custom--toque);
	justify-content: center;
	position: relative;
	width: var(--wp--custom--toque);
}

.st-barra__globo {
	background: var(--wp--custom--marca--tinta);
	border: 2px solid var(--wp--custom--marca--blanco);
	border-radius: var(--wp--custom--radio--pastilla);
	color: var(--wp--custom--marca--blanco);
	font-size: 0.6875rem;
	font-weight: 700;
	inset-block-start: -4px;
	inset-inline-end: -6px;
	line-height: 1;
	min-width: 20px;
	padding: 3px 5px;
	position: absolute;
	text-align: center;
}

.st-barra__textos {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.st-barra__items {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.st-barra__meta {
	color: var(--wp--custom--marca--gris);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.st-barra__meta:empty {
	display: none;
}

.st-barra__total {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	margin-inline-start: auto;
	white-space: nowrap;
}

.st-barra__progreso {
	background: var(--wp--custom--marca--borde);
	border-radius: var(--wp--custom--radio--pastilla);
	display: block;
	height: 4px;
	margin-block-end: 8px;
	overflow: hidden;
}

.st-barra__progreso-barra {
	background: var(--wp--custom--marca--rojo);
	display: block;
	height: 100%;
	transition: width 0.25s ease-out;
}

/*
 * La barra es fija: sin este colchón, el último producto de la góndola queda
 * debajo de ella y no hay forma de tocarle el botón.
 *
 * La clase la pone el servidor (`body_class`, cuando el carrito tiene algo) y
 * la mantiene al día el JavaScript. Se hace así y no con `:has()` sobre la
 * barra para que el colchón exista desde la primera pintada, sin depender ni
 * del script ni del soporte del selector.
 */
.st-con-barra .wp-site-blocks {
	padding-block-end: 6.5rem;
}

/* ══ Resumen del pedido ════════════════════════════════════════════════════ */

.st-panel {
	align-items: flex-end;
	background: rgba(26, 26, 26, 0.45);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: var(--wp--custom--capa--panel);
}

.st-panel[hidden] {
	display: none;
}

.st-panel__caja {
	background: var(--wp--custom--marca--blanco);
	border-radius: var(--wp--custom--radio--grande) var(--wp--custom--radio--grande) 0 0;
	box-shadow: var(--wp--custom--sombra--panel);
	display: flex;
	flex-direction: column;
	max-height: 88vh;
	padding: var(--wp--preset--spacing--40);
	padding-bottom: max(var(--wp--preset--spacing--40), env(safe-area-inset-bottom));
	width: 100%;
}

@media (min-width: 600px) {
	.st-panel {
		align-items: center;
	}

	.st-panel__caja {
		border-radius: var(--wp--custom--radio--grande);
		max-width: 30rem;
	}
}

.st-panel__encabezado {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--30);
}

.st-panel__titulo {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.st-panel__cerrar {
	background: none;
	border: 0;
	color: var(--wp--custom--marca--gris);
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	min-height: var(--wp--custom--toque);
	min-width: var(--wp--custom--toque);
}

.st-panel__lineas {
	list-style: none;
	margin: 0;
	overflow-y: auto;
	padding: 0;
}

.st-panel__cargando:empty,
.st-panel__cargando[hidden] {
	display: none;
}

.st-panel__cargando {
	color: var(--wp--custom--marca--gris);
	font-size: var(--wp--preset--font-size--small);
}

.st-linea {
	align-items: center;
	border-block-end: 1px solid var(--wp--custom--marca--borde);
	display: flex;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
}

.st-linea--vacio {
	color: var(--wp--custom--marca--gris);
	justify-content: center;
}

.st-linea__foto {
	border-radius: var(--wp--custom--radio--chico);
	flex: 0 0 auto;
	height: 44px;
	object-fit: contain;
	width: 44px;
}

.st-linea__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.st-linea__nombre {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.25;
}

.st-linea__peso,
.st-linea__pum {
	color: var(--wp--custom--marca--gris);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.3;
}

.st-linea__importe {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	margin-inline-start: auto;
	white-space: nowrap;
}

.st-panel__pie {
	border-block-start: 1px solid var(--wp--custom--marca--borde);
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
}

.st-panel__total {
	display: flex;
	font-size: var(--wp--preset--font-size--large);
	justify-content: space-between;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.st-panel__ir {
	background: var(--wp--custom--marca--rojo);
	border-radius: var(--wp--custom--radio--pastilla);
	color: var(--wp--custom--marca--blanco);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	min-height: var(--wp--custom--toque);
	text-decoration: none;
}

.st-panel__ir:hover,
.st-panel__ir:focus-visible {
	background: var(--wp--custom--marca--rojo-oscuro);
	color: var(--wp--custom--marca--blanco);
	text-decoration: none;
}

.st-panel__carrito {
	color: var(--wp--custom--marca--gris);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	margin-block-start: var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--toque);
	padding-block: 12px;
	text-align: center;
}

/* ══ Entrega ═══════════════════════════════════════════════════════════════ */

.st-entrega {
	background: var(--wp--custom--marca--fondo);
	border-radius: var(--wp--custom--radio--chico);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	gap: 4px 8px;
	line-height: 1.4;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 10px 12px;
}

.st-entrega--caida {
	background: var(--wp--custom--marca--rojo-suave);
}

.st-entrega strong {
	flex-basis: 100%;
}

.st-entrega__detalle {
	font-weight: 600;
}

.st-entrega a {
	margin-inline-start: auto;
}

/* ══ Góndola ═══════════════════════════════════════════════════════════════ */

.st-gondola__lista {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.st-gondola__lista {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.st-gondola__lista {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

.st-gondola__enlace {
	align-items: center;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: var(--wp--custom--toque);
	padding: 4px;
	text-align: center;
	text-decoration: none;
}

.st-gondola__figura {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: var(--wp--custom--marca--rojo-suave);
	border-radius: var(--wp--custom--radio--medio);
	display: flex;
	justify-content: center;
	overflow: hidden;
	width: 100%;
}

.st-gondola__imagen {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.st-gondola__inicial {
	color: var(--wp--custom--marca--rojo);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
}

.st-gondola__nombre {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.2;
}

/* ══ Chips de subcategoría ═════════════════════════════════════════════════ */

.st-chips {
	margin-block: var(--wp--preset--spacing--30);
}

.st-chips__lista {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 0;
}

/*
 * La sangría de los chips va DESPUÉS de la regla base, no en el bloque de
 * media queries de más arriba: una media query no suma especificidad, así que
 * el `margin: 0` y el `padding: 0` de `.st-chips__lista` —que están más
 * abajo en el archivo— le ganaban y la sangría no se aplicaba nunca.
 */
@media (max-width: 599px) {
	.st-chips__lista {
		margin-inline: calc(-1 * var(--wp--style--root--padding-left)) calc(-1 * var(--wp--style--root--padding-right));
		padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
		scroll-padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
	}
}

.st-chips__item {
	flex: 0 0 auto;
}

.st-chips__chip {
	align-items: center;
	background: var(--wp--custom--marca--fondo);
	border: 1px solid var(--wp--custom--marca--borde);
	border-radius: var(--wp--custom--radio--pastilla);
	color: var(--wp--custom--marca--tinta);
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	min-height: var(--wp--custom--toque);
	padding: 0 16px;
	text-decoration: none;
	white-space: nowrap;
}

.st-chips__chip--activo {
	background: var(--wp--custom--marca--rojo);
	border-color: var(--wp--custom--marca--rojo);
	color: var(--wp--custom--marca--blanco);
}

.st-chips__chip:hover,
.st-chips__chip:focus-visible {
	text-decoration: none;
}

/* ══ Buscador ══════════════════════════════════════════════════════════════ */

.st-buscador__forma {
	align-items: center;
	background: var(--wp--custom--marca--fondo);
	border: 1px solid var(--wp--custom--marca--borde);
	border-radius: var(--wp--custom--radio--pastilla);
	display: flex;
	gap: 8px;
	padding-inline-start: 14px;
}

.st-buscador__forma:focus-within {
	border-color: var(--wp--custom--marca--rojo);
}

.st-buscador__lupa {
	color: var(--wp--custom--marca--gris);
	display: flex;
	flex: 0 0 auto;
}

.st-buscador__campo {
	background: none;
	border: 0;
	color: inherit;
	flex: 1 1 auto;
	/* 16px, para que iOS no haga zoom al enfocar. */
	font-family: inherit;
	font-size: 16px;
	min-height: var(--wp--custom--toque);
	min-width: 0;
	padding: 0;
}

.st-buscador__campo:focus {
	outline: none;
}

.st-buscador__enviar {
	background: var(--wp--custom--marca--rojo);
	border: 0;
	border-radius: var(--wp--custom--radio--pastilla);
	color: var(--wp--custom--marca--blanco);
	cursor: pointer;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: 3px;
	min-height: var(--wp--custom--toque);
	padding: 0 18px;
}

.st-buscador__enviar:hover,
.st-buscador__enviar:focus-visible {
	background: var(--wp--custom--marca--rojo-oscuro);
}

/* ══ Ficha ═════════════════════════════════════════════════════════════════ */

.st-datos__lista {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.st-datos__par {
	display: flex;
	gap: 8px;
}

.st-datos__clave {
	color: var(--wp--custom--marca--gris);
	flex: 0 0 7rem;
	font-size: var(--wp--preset--font-size--small);
}

.st-datos__valor {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: 0;
}

.st-ficha-compra {
	margin-block: var(--wp--preset--spacing--40);
}

/* ══ Ver más ═══════════════════════════════════════════════════════════════ */

.st-vermas {
	display: flex;
	justify-content: center;
	margin-block: var(--wp--preset--spacing--40);
}

.st-vermas__boton {
	background: var(--wp--custom--marca--blanco);
	border: 1px solid var(--wp--custom--marca--rojo);
	border-radius: var(--wp--custom--radio--pastilla);
	color: var(--wp--custom--marca--rojo-oscuro);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	min-height: var(--wp--custom--toque);
	min-width: 12rem;
	padding: 0 24px;
}

.st-vermas__boton:hover,
.st-vermas__boton:focus-visible {
	background: var(--wp--custom--marca--rojo-suave);
}

.st-vermas__boton:disabled {
	cursor: progress;
	opacity: 0.6;
}

/* ══ Avisos y estados globales ═════════════════════════════════════════════ */

.st-aviso {
	background: var(--wp--custom--marca--tinta);
	border-radius: var(--wp--custom--radio--medio);
	color: var(--wp--custom--marca--blanco);
	font-size: var(--wp--preset--font-size--small);
	inset-block-end: calc(6.5rem + env(safe-area-inset-bottom));
	inset-inline: var(--wp--style--root--padding-right);
	line-height: 1.35;
	margin-inline: auto;
	max-width: 26rem;
	opacity: 0;
	padding: 12px 16px;
	pointer-events: none;
	position: fixed;
	transform: translateY(8px);
	transition: opacity 0.2s ease-out, transform 0.2s ease-out;
	z-index: calc(var(--wp--custom--capa--panel) + 1);
}

.st-aviso--visible {
	opacity: 1;
	transform: translateY(0);
}

/* Mientras el carrito está escribiendo, el cursor lo dice y nada más: los
   números ya se movieron, y taparlos con un spinner sería desmentirlos. */
.st-ocupado .st-paso__numero {
	opacity: 0.65;
}

.st-sin-scroll {
	overflow: hidden;
}

/* ══ Targets táctiles de los bloques del core ══════════════════════════════ */

/*
 * El encabezado y el pie usan bloques de WordPress (site-title, page-list) y
 * ésos vienen con la altura de su texto: entre 19 y 30px. La regla de este tema
 * es 44px en todo lo clickeable, y "todo" incluye lo que no escribimos
 * nosotros. Se les da altura sin tocar su tipografía.
 *
 * El enlace del bloque de entrega entra acá por lo mismo: es una acción
 * principal ("elegir día y horario") en un párrafo de texto corrido.
 */
.st-cabecera .wp-block-site-title a,
.st-pie .wp-block-site-title a,
.st-pie .wp-block-page-list a,
.wp-block-woocommerce-breadcrumbs a,
.woocommerce-tabs .tabs a,
.st-entrega a {
	align-items: center;
	display: inline-flex;
	min-height: var(--wp--custom--toque);
}

.st-pie .wp-block-page-list {
	gap: 0;
}

/*
 * Las migas de pan y las pestañas de la ficha son enlaces de bloques de
 * WooCommerce: venían con la altura de su caja de línea (unos 18px con
 * `x-small`), muy por debajo de los 44px que este tema declara no negociables.
 * Se alinean en su fila sin romper el renglón.
 */
.wp-block-woocommerce-breadcrumbs {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0 2px;
}

/*
 * El formulario de reseña que trae `woocommerce/product-details` no está en un
 * `.form-row`, así que ninguna hoja de WooCommerce lo alcanza y sus campos
 * quedan con el tamaño del navegador (unos 13px). Por debajo de 16px, Safari en
 * iOS hace zoom al enfocar y descuadra la pantalla entera: es la misma regla que
 * ya cumplen el buscador y el selector de peso.
 */
#review_form input[type="text"],
#review_form input[type="email"],
#review_form input[type="url"],
#review_form textarea,
#review_form select,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.comment-form select {
	font-family: inherit;
	font-size: 16px;
	max-width: 100%;
	min-height: var(--wp--custom--toque);
	padding: 8px 12px;
	width: 100%;
}

.comment-form textarea,
#review_form textarea {
	min-height: 6rem;
}

/*
 * Los enlaces de texto van subrayados por defecto (lo fija `theme.json`), y no
 * sólo en `:hover`: en un teléfono el hover no existe, y el color solo no
 * alcanza —el rojo oscuro contra la tinta del cuerpo da 2:1, muy por debajo del
 * 3:1 que hace falta cuando la otra señal aparece recién al interactuar.
 *
 * Lo que NO se subraya es lo que ya se lee como botón o como chip: ahí la forma
 * es la señal, y un subrayado adentro de una pastilla roja es ruido.
 */
.st-comprar__boton,
.st-chips__chip,
.st-panel__ir,
.st-tarjeta__enlace,
.st-gondola__enlace,
.st-pie .wp-block-page-list a {
	text-decoration: none;
}

/* ══ Accesibilidad ═════════════════════════════════════════════════════════ */

.st-comprar__boton:focus-visible,
.st-paso__boton:focus-visible,
.st-pesos__agregar:focus-visible,
.st-vermas__boton:focus-visible,
.st-chips__chip:focus-visible,
.st-gondola__enlace:focus-visible,
.st-tarjeta__enlace:focus-visible,
.st-barra__abrir:focus-visible,
.st-panel__cerrar:focus-visible,
.st-hoja__cerrar:focus-visible,
.st-hoja__listo:focus-visible {
	outline: 2px solid var(--wp--custom--marca--tinta);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.st-aviso,
	.st-barra__progreso-barra {
		transition: none;
	}
}