/* Mitilli Hermanos storefront components. All color decisions come from tokens.css. */

/* ---------- Base and accessibility ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body.mitilli-storefront {
	margin: 0;
	background: var(--mitilli-color-surface);
	color: var(--mitilli-color-text);
	font-family: var(--mitilli-font-body);
	font-size: var(--mitilli-font-size-base);
	line-height: var(--mitilli-line-height-body);
	text-rendering: optimizeLegibility;
}

#wrapper,
#inner-wrap,
.mitilli-site-header__inner > *,
.mitilli-hero__grid > * {
	min-width: 0;
}

#wrapper {
	overflow: clip;
}

body.mitilli-drawer-open,
body.mitilli-menu-open,
body.mitilli-filter-open {
	overflow: hidden;
}

img,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: var(--mitilli-color-action);
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--mitilli-color-action-hover);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--mitilli-color-surface);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--mitilli-color-action);
}

button,
input,
select,
textarea {
	font: inherit;
}

button,
.button,
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button,
.mitilli-button {
	min-height: var(--mitilli-control-height);
	border: 1px solid var(--mitilli-color-action);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-on-action);
	font-weight: var(--mitilli-font-weight-medium);
	line-height: 1.2;
	padding: var(--mitilli-space-3) var(--mitilli-space-5);
	text-align: center;
	text-decoration: none;
	transition: background var(--mitilli-transition-fast), border-color var(--mitilli-transition-fast), color var(--mitilli-transition-fast), transform var(--mitilli-transition-fast);
}

button:hover,
.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.wc-block-components-button:hover,
.mitilli-button:hover {
	border-color: var(--mitilli-color-action-hover);
	background: var(--mitilli-color-action-hover);
	color: var(--mitilli-color-on-action);
}

button:active,
.button:active,
.mitilli-button:active {
	transform: translateY(1px);
}

button:disabled,
.button.disabled,
[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.55;
}

.mitilli-button--secondary,
button.mitilli-button--secondary {
	background: transparent;
	color: var(--mitilli-color-action);
}

.mitilli-button--secondary:hover,
button.mitilli-button--secondary:hover {
	background: var(--mitilli-color-surface-alt);
	color: var(--mitilli-color-action-hover);
}

.mitilli-container {
	width: calc(100% - var(--mitilli-space-5) - var(--mitilli-space-5));
	max-width: var(--mitilli-container);
	margin-inline: auto;
}

.mitilli-sr-only,
.mitilli-solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mitilli-skip-link {
	position: fixed;
	z-index: 100000;
	top: var(--mitilli-space-3);
	left: var(--mitilli-space-3);
	padding: var(--mitilli-space-3) var(--mitilli-space-4);
	border-radius: var(--mitilli-radius-sm);
	background: var(--mitilli-color-white);
	box-shadow: var(--mitilli-shadow-md);
	font-weight: var(--mitilli-font-weight-bold);
	transform: translateY(-200%);
}

.mitilli-skip-link:focus {
	transform: translateY(0);
}

.mitilli-eyebrow {
	margin: 0 0 var(--mitilli-space-3);
	color: var(--mitilli-color-action);
	font-size: var(--mitilli-font-size-xs);
	font-weight: var(--mitilli-font-weight-bold);
	letter-spacing: var(--mitilli-letter-spacing-label);
	line-height: 1.2;
	text-transform: uppercase;
}

/* Set de iconos propio: trazo 1,75 sobre grilla de 24. */
.mitilli-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	stroke: currentColor;
}

.mitilli-icon--sm {
	width: 1rem;
	height: 1rem;
}

.mitilli-icon-button {
	display: inline-grid;
	width: var(--mitilli-tap-target);
	height: var(--mitilli-tap-target);
	min-height: var(--mitilli-tap-target);
	place-items: center;
	padding: 0;
	border-color: transparent;
	background: transparent;
	color: var(--mitilli-color-text);
}

.mitilli-icon-button:hover {
	border-color: var(--mitilli-color-border);
	background: var(--mitilli-color-surface-alt);
	color: var(--mitilli-color-text);
}

.mitilli-icon-button svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.price,
.woocommerce-Price-amount,
.wc-block-formatted-money-amount {
	font-variant-numeric: tabular-nums;
}

/* ---------- Service strip and header ---------- */
/* Verde profundo y texto beige: la franja tiene que leerse como un escalon
   por encima del header, no como otra banda de marca mas. */
.mitilli-service-strip {
	background: var(--mitilli-color-action-hover);
	color: var(--mitilli-color-accent);
	font-size: 0.8125rem;
}

.mitilli-service-strip__inner {
	display: flex;
	min-height: 2.375rem;
	align-items: center;
	justify-content: center;
	gap: var(--mitilli-space-6);
	text-align: center;
}

.mitilli-service-strip__desktop {
	display: inline-flex;
	align-items: center;
	gap: var(--mitilli-space-2);
}

.mitilli-service-strip .mitilli-icon {
	opacity: 0.85;
}

.mitilli-service-strip__mobile {
	display: none;
}

.mitilli-site-header {
	position: relative;
	z-index: 100;
	border-bottom: 1px solid var(--mitilli-color-border);
	background: var(--mitilli-color-surface);
}

.mitilli-site-header__inner {
	display: grid;
	min-height: var(--mitilli-header-height);
	grid-template-columns: auto minmax(18rem, 1fr) minmax(14rem, 23rem) auto;
	align-items: center;
	gap: clamp(var(--mitilli-space-4), 2vw, var(--mitilli-space-8));
}

.mitilli-brand {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	color: var(--mitilli-color-action-hover);
	line-height: 1;
	text-decoration: none;
}

.mitilli-brand:hover {
	color: var(--mitilli-color-action-hover);
}

.mitilli-brand__wordmark {
	font-family: var(--mitilli-font-display);
	font-size: clamp(1.2rem, 1rem + 0.5vw, 1.55rem);
	font-weight: var(--mitilli-font-weight-bold);
	letter-spacing: var(--mitilli-letter-spacing-display);
}

.mitilli-brand__wordmark span {
	color: var(--mitilli-color-accent);
}

.mitilli-brand__descriptor {
	margin-top: var(--mitilli-space-1);
	color: var(--mitilli-color-text-muted);
	font-size: 0.64rem;
	font-weight: var(--mitilli-font-weight-medium);
	letter-spacing: var(--mitilli-letter-spacing-label);
	text-transform: uppercase;
}

.mitilli-brand__logo {
	display: block;
	width: 10.5rem;
	max-width: 100%;
}

.mitilli-brand__image {
	width: 100%;
	max-width: none;
	height: auto;
	max-height: 3.55rem;
	object-fit: contain;
}

.mitilli-primary-navigation ul {
	display: flex;
	align-items: center;
	gap: clamp(var(--mitilli-space-3), 1.35vw, var(--mitilli-space-6));
	margin: 0;
	padding: 0;
	list-style: none;
}

.mitilli-primary-navigation a {
	color: var(--mitilli-color-text);
	font-size: 0.9375rem;
	font-weight: var(--mitilli-font-weight-medium);
	text-decoration: none;
	white-space: nowrap;
}

.mitilli-primary-navigation a:hover,
.mitilli-primary-navigation a[aria-current="page"] {
	color: var(--mitilli-color-action);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.mitilli-menu-toggle,
.mitilli-menu-close {
	display: none;
}

.mitilli-site-search {
	position: relative;
	min-width: 0;
}

.mitilli-site-search svg {
	position: absolute;
	top: 50%;
	left: var(--mitilli-space-4);
	width: 1.15rem;
	height: 1.15rem;
	fill: none;
	stroke: var(--mitilli-color-text-muted);
	stroke-width: 1.8;
	transform: translateY(-50%);
}

.mitilli-site-search input,
.mitilli-home-search input {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: var(--mitilli-control-height);
	padding: var(--mitilli-space-3) var(--mitilli-space-4);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-pill);
	background: var(--mitilli-color-white);
	color: var(--mitilli-color-text);
}

.mitilli-site-search input {
	padding-left: var(--mitilli-space-10);
}

.mitilli-site-search input::placeholder,
.mitilli-home-search input::placeholder {
	color: var(--mitilli-color-text-muted);
}

/* Accion persistente del sitio: en la maqueta va solida, no delineada. */
.mitilli-cart-trigger {
	position: relative;
	display: flex;
	min-width: 9.6rem;
	min-height: var(--mitilli-control-height);
	align-items: center;
	gap: var(--mitilli-space-3);
	padding: var(--mitilli-space-2) var(--mitilli-space-3);
	border: 1px solid var(--mitilli-color-action);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-on-action);
	text-decoration: none;
}

/*
 * Hover sólido, un tono más oscuro. Había una segunda regla que lo pasaba a
 * fondo crema: el total («1 producto · $…») seguía en crema y desaparecía.
 */
.mitilli-cart-trigger:hover,
.mitilli-cart-trigger:focus-visible {
	border-color: var(--mitilli-color-action-hover);
	background: var(--mitilli-color-action-hover);
	color: var(--mitilli-color-on-action);
	text-decoration: none;
}

.mitilli-cart-trigger svg {
	width: 1.45rem;
	height: 1.45rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.mitilli-cart-trigger__copy {
	display: grid;
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-bold);
	line-height: 1.2;
}

/* Sobre el carrito solido, el gris de texto atenuado no contrasta. */
.mitilli-cart-trigger__copy small {
	margin-top: var(--mitilli-space-1);
	color: var(--mitilli-color-on-action-muted);
	font-size: 0.72rem;
	font-weight: var(--mitilli-font-weight-normal);
	white-space: nowrap;
}

.mitilli-cart-trigger__count {
	position: absolute;
	top: calc(-1 * var(--mitilli-space-2));
	right: calc(-1 * var(--mitilli-space-2));
	display: none;
	min-width: 1.35rem;
	height: 1.35rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--mitilli-radius-pill);
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-on-action);
	font-size: 0.68rem;
}

.mitilli-site-header--checkout .mitilli-site-header__inner {
	grid-template-columns: 1fr auto;
}

.mitilli-secure-checkout {
	display: flex;
	align-items: center;
	gap: var(--mitilli-space-2);
	margin: 0;
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-medium);
}

.mitilli-secure-checkout svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: var(--mitilli-color-success);
	stroke-width: 1.8;
}

/* ---------- Common sections ---------- */
.mitilli-front-page,
.mitilli-front-page .content-area,
.mitilli-front-page .site-main,
.home #inner-wrap {
	width: 100%;
	max-width: none;
	padding: 0;
}

.mitilli-section {
	padding-block: var(--mitilli-section-space);
}

/*
 * La alternancia entre surface (#fdf6e9) y surface-alt (#fffaf1) es de ~4 puntos
 * de luminosidad: en pantalla no se distingue y el sitio queda como ocho bandas
 * de crema seguidas. Se apoya con una linea de corte, y se agrega una banda
 * verde real para los cortes de capitulo (ver REDISENO_Y_PLAN 3: "verde casi
 * negro para hero, promociones y cierre de pagina").
 */
.mitilli-section--alt {
	border-block: 1px solid var(--mitilli-color-border-subtle);
	background: var(--mitilli-color-surface-alt);
}

.mitilli-section--brand {
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-on-action);
}

.mitilli-section--brand :is(h2, h3, .mitilli-section-heading h2) {
	color: var(--mitilli-color-on-action);
}

.mitilli-section--brand .mitilli-eyebrow {
	color: var(--mitilli-color-accent);
}

.mitilli-section--brand p,
.mitilli-section--brand figcaption {
	color: var(--mitilli-color-on-action-muted);
}

.mitilli-section--brand a:not(.mitilli-button):not(.button) {
	color: var(--mitilli-color-accent);
}

/* Boton de contorno claro, para usar sobre la banda verde. */
.mitilli-section--brand .mitilli-button--ghost,
.mitilli-button--on-brand {
	border-color: var(--mitilli-color-border-on-action);
	background: transparent;
	color: var(--mitilli-color-accent);
}

.mitilli-section--brand .mitilli-button--ghost:hover,
.mitilli-button--on-brand:hover {
	border-color: var(--mitilli-color-accent);
	background: rgb(234 215 208 / 12%);
	color: var(--mitilli-color-accent);
}

/* El ancho de lectura aplica al texto de apoyo, no al titular: a 57,6 px en
   versalitas, 68ch parte titulos que entran en una linea. */
.mitilli-section-heading {
	max-width: none;
	margin-bottom: clamp(var(--mitilli-space-8), 4vw, var(--mitilli-space-12));
}

.mitilli-section-heading--split {
	display: flex;
	max-width: none;
	align-items: end;
	justify-content: space-between;
	gap: var(--mitilli-space-5);
}

.mitilli-section-heading h2,
.mitilli-page-intro h1,
.mitilli-hero h1 {
	margin: 0;
	color: var(--mitilli-color-text);
	font-family: var(--mitilli-font-heading);
	font-weight: var(--mitilli-font-weight-bold);
	letter-spacing: var(--mitilli-letter-spacing-display);
	line-height: var(--mitilli-line-height-tight);
}

.mitilli-section-heading h2 {
	font-size: var(--mitilli-font-size-3xl);
}

.mitilli-section-heading > p {
	max-width: var(--mitilli-reading-width);
}

.mitilli-section-heading p:last-child {
	margin: var(--mitilli-space-4) 0 0;
	color: var(--mitilli-color-text-muted);
}

.mitilli-section-heading > a,
.mitilli-text-link {
	font-weight: var(--mitilli-font-weight-bold);
}

/* ---------- Home ---------- */
body.home.mitilli-storefront #inner-wrap {
	max-width: none;
}

.mitilli-home {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.mitilli-hero {
	position: relative;
	overflow: hidden;
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-on-action);
}

/*
 * Hero partido: el panel verde queda para la tipografia y la fotografia sangra
 * hasta el borde de la pantalla. El texto se alinea al contenedor calculando
 * el margen desde el viewport, porque la grilla ya no vive dentro de el.
 */
.mitilli-hero__grid {
	display: grid;
	min-height: clamp(28rem, 52vh, 34rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

.mitilli-hero__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-block: clamp(var(--mitilli-space-8), 4vw, var(--mitilli-space-12));
	padding-left: max(var(--mitilli-space-5), calc((100vw - var(--mitilli-container)) / 2));
	padding-right: clamp(var(--mitilli-space-6), 5vw, var(--mitilli-space-12));
}

.mitilli-hero h1 {
	max-width: 15ch;
	color: var(--mitilli-color-on-action);
	font-family: var(--mitilli-font-display);
	font-size: clamp(2.75rem, 4.4vw, 4rem);
	letter-spacing: -0.01em;
	line-height: 1.04;
}

.mitilli-hero .mitilli-eyebrow {
	color: var(--mitilli-color-brand-mark-beige);
}

.mitilli-hero__copy > p:not(.mitilli-eyebrow) {
	max-width: 38ch;
	margin: var(--mitilli-space-6) 0 0;
	color: var(--mitilli-color-on-action-muted);
	font-size: var(--mitilli-font-size-lg);
}

.mitilli-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mitilli-space-3);
	margin-top: var(--mitilli-space-8);
}

.mitilli-hero__actions .mitilli-button {
	min-height: 3.375rem;
	padding-inline: var(--mitilli-space-6);
	font-size: 1.0625rem;
	border-color: var(--mitilli-color-surface);
	background: var(--mitilli-color-surface);
	color: var(--mitilli-color-action);
}

.mitilli-hero__actions .mitilli-button:hover {
	border-color: var(--mitilli-color-brand-mark-beige);
	background: var(--mitilli-color-brand-mark-beige);
	color: var(--mitilli-color-action-hover);
}

.mitilli-hero__actions .mitilli-button--secondary {
	background: transparent;
	color: var(--mitilli-color-on-action);
}

.mitilli-hero__actions .mitilli-button--secondary:hover {
	background: var(--mitilli-color-surface);
	color: var(--mitilli-color-action);
}

.mitilli-hero__media {
	position: relative;
	overflow: hidden;
}

/* Sin marco decorativo: la fotografia sangra, no es una tarjeta flotante. */

.mitilli-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	object-position: 50% 55%;
}

.mitilli-hero__media picture {
	display: contents;
}

.mitilli-home-search {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--mitilli-space-8));
}

.mitilli-home-search .mitilli-container {
	display: grid;
	grid-template-columns: auto minmax(16rem, 1fr);
	align-items: center;
	gap: var(--mitilli-space-8);
	padding: var(--mitilli-space-6);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-lg);
	background: var(--mitilli-color-surface);
	box-shadow: var(--mitilli-shadow-md);
}

.mitilli-home-search h2 {
	margin: 0;
	font-size: var(--mitilli-font-size-xl);
}

.mitilli-home-search form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--mitilli-space-2);
}

.mitilli-category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mitilli-space-5);
}

.mitilli-category-card {
	position: relative;
	overflow: hidden;
	border: 0;
	border-radius: var(--mitilli-radius-lg);
	background: var(--mitilli-color-action);
	box-shadow: var(--mitilli-shadow-sm);
	color: var(--mitilli-color-on-action);
	text-decoration: none;
	transition: transform var(--mitilli-transition), box-shadow var(--mitilli-transition);
}

.mitilli-category-card:hover {
	color: var(--mitilli-color-on-action);
	box-shadow: var(--mitilli-shadow-md);
	transform: translateY(calc(-1 * var(--mitilli-space-1)));
}

.mitilli-category-card img {
	width: 100%;
	height: 14.625rem;
	object-fit: cover;
}

/*
 * El nombre va sobre una barra verde solida, no sobre un cuerpo blanco: da el
 * corte de color que la home no tenia y evita depender de la altura de la foto.
 */
.mitilli-category-card__bar {
	display: flex;
	height: 3.875rem;
	align-items: center;
	justify-content: space-between;
	gap: var(--mitilli-space-3);
	padding-inline: var(--mitilli-space-5);
	color: var(--mitilli-color-on-action);
	font-size: 1.1875rem;
	font-weight: var(--mitilli-font-weight-medium);
	letter-spacing: -0.01em;
}

.mitilli-category-card__bar .mitilli-icon {
	opacity: 0.7;
}

.mitilli-category-subnav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mitilli-space-2);
	margin-top: var(--mitilli-space-6);
}

.mitilli-category-subnav__label {
	margin-right: var(--mitilli-space-2);
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-medium);
}

.mitilli-chip {
	display: inline-flex;
	height: 2.125rem;
	align-items: center;
	gap: var(--mitilli-space-1);
	padding-inline: var(--mitilli-space-4);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-pill);
	background: var(--mitilli-color-white);
	color: var(--mitilli-color-text);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-medium);
	text-decoration: none;
}

.mitilli-chip:hover {
	border-color: var(--mitilli-color-border-strong);
	color: var(--mitilli-color-text);
}

/* El fondo lo define la banda (.mitilli-section--brand), que viene antes en el
   archivo; fijarlo aca volvia a pisar el verde por orden de cascada. */
.mitilli-story:not(.mitilli-section--brand) {
	background: var(--mitilli-color-surface);
}

.mitilli-story__layout {
	display: grid;
	grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
	align-items: center;
	gap: clamp(var(--mitilli-space-8), 5vw, var(--mitilli-space-16));
}

/* Un escalon por debajo de los titulos de seccion: vive en una columna angosta
   y a 57,6 px en versalitas se parte en seis lineas. */
.mitilli-story__copy h2 {
	margin: 0;
	font-family: var(--mitilli-font-heading);
	font-size: var(--mitilli-font-size-2xl);
	letter-spacing: var(--mitilli-letter-spacing-display);
	line-height: 1.06;
}

.mitilli-story__copy > p:not(.mitilli-eyebrow) {
	margin: var(--mitilli-space-5) 0;
	color: var(--mitilli-color-on-action-muted);
	font-size: var(--mitilli-font-size-lg);
}

/* Tres retratos en fila sobre la banda verde. Sin marco ni fondo: sobre verde,
   una tarjeta clara leeria como un parche blanco. */
.mitilli-story__mosaic {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mitilli-space-4);
}

.mitilli-story__item {
	display: grid;
	grid-template-rows: auto 1fr;
	min-width: 0;
	margin: 0;
	border: 0;
	background: transparent;
}

.mitilli-story__item picture {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--mitilli-radius-md);
}

.mitilli-story__item img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
}

/* Encuadres recalibrados tras mudar la fachada a "Nuestros locales". */
.mitilli-story__item--1 img {
	object-position: 50% 44%;
}

.mitilli-story__item--2 img {
	object-position: 50% 43%;
}

.mitilli-story__item--3 img {
	object-position: 50% 35%;
}

.mitilli-story__item figcaption,
.mitilli-brand-gallery__item figcaption {
	padding: var(--mitilli-space-3) var(--mitilli-space-4);
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-medium);
}

/* Los pies de la historia viven sobre la banda verde: en gris quedaban en
   1,94:1 de contraste, practicamente invisibles. */
.mitilli-section--brand .mitilli-story__item figcaption {
	padding-inline: 0;
	color: var(--mitilli-color-on-action-muted);
}

.mitilli-brand-gallery {
	background: var(--mitilli-color-surface-alt);
}

.mitilli-brand-gallery .mitilli-section-heading {
	margin-bottom: var(--mitilli-space-8);
}

.mitilli-brand-gallery__controls {
	display: flex;
	flex: 0 0 auto;
	gap: var(--mitilli-space-2);
}

.mitilli-brand-gallery__controls button {
	display: grid;
	width: var(--mitilli-tap-target);
	height: var(--mitilli-tap-target);
	min-height: var(--mitilli-tap-target);
	place-items: center;
	padding: 0;
	border-radius: var(--mitilli-radius-pill);
}

.mitilli-brand-gallery__controls button span {
	font-size: var(--mitilli-font-size-xl);
	line-height: 1;
}

.mitilli-brand-gallery__track {
	display: grid;
	grid-auto-columns: minmax(18rem, 23rem);
	grid-auto-flow: column;
	gap: var(--mitilli-space-4);
	padding: var(--mitilli-space-2) var(--mitilli-space-1) var(--mitilli-space-5);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-padding-inline: var(--mitilli-space-1);
	scroll-snap-type: inline mandatory;
	scrollbar-color: var(--mitilli-color-action) var(--mitilli-color-border);
	scrollbar-width: thin;
}

.mitilli-brand-gallery__item {
	display: grid;
	grid-template-rows: 1fr auto;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-surface);
	scroll-snap-align: start;
}

.mitilli-brand-gallery__item:last-child {
	grid-column: span 2;
}

.mitilli-brand-gallery__image {
	width: 100%;
	height: 100%;
	min-height: 25rem;
	max-height: 32rem;
	object-fit: cover;
}

.mitilli-brand-gallery__item:last-child .mitilli-brand-gallery__image {
	object-position: 50% 50%;
}

.mitilli-preparation-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mitilli-space-8);
}

/*
 * Lista editorial en vez de cuatro tarjetas: el numeral en la tipografia de
 * marca y una regla superior. La preparacion es una de las funciones que
 * diferencian al negocio; merece verse como contenido, no como cuatro cajas.
 */
.mitilli-preparation-grid article {
	display: grid;
	align-content: start;
	padding: var(--mitilli-space-5) 0 0;
	border: 0;
	border-top: 2px solid var(--mitilli-color-action);
	border-radius: 0;
	background: transparent;
}

.mitilli-preparation-grid article > span {
	display: block;
	width: auto;
	height: auto;
	margin-bottom: var(--mitilli-space-3);
	border-radius: 0;
	background: transparent;
	color: var(--mitilli-color-action);
	font-family: var(--mitilli-font-display);
	font-size: 2.125rem;
	font-weight: var(--mitilli-font-weight-bold);
	letter-spacing: var(--mitilli-letter-spacing-display);
	line-height: 1;
}

.mitilli-preparation-grid h3 {
	margin: 0;
	font-size: var(--mitilli-font-size-xl);
}

.mitilli-preparation-grid p {
	margin: var(--mitilli-space-3) 0 0;
	color: var(--mitilli-color-text-muted);
}

/*
 * Banda clara. Con "El oficio" ya en verde, dejar tambien "Como comprar" en
 * verde profundo daba cuatro bandas oscuras en la misma pagina y se perdia el
 * corte de capitulo que la banda verde tiene que producir.
 */
.mitilli-how :is(h2, h3) {
	color: var(--mitilli-color-text);
}

.mitilli-how p {
	color: var(--mitilli-color-text-muted);
}

.mitilli-step-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mitilli-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mitilli-step-grid li {
	padding: var(--mitilli-space-6);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-lg);
	background: var(--mitilli-color-white);
}

/* Numeral en beige, como los pasos de la maqueta. */
.mitilli-step-grid li > span {
	display: inline-grid;
	width: 2.5rem;
	height: 2.5rem;
	place-items: center;
	border-radius: var(--mitilli-radius-pill);
	background: var(--mitilli-color-accent);
	color: var(--mitilli-color-action-hover);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-bold);
}

.mitilli-step-grid h3 {
	margin: var(--mitilli-space-4) 0 var(--mitilli-space-2);
	font-size: var(--mitilli-font-size-xl);
}

.mitilli-step-grid p {
	margin: 0;
	opacity: 0.82;
}

.mitilli-faq__grid {
	display: grid;
	grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
	gap: clamp(var(--mitilli-space-8), 6vw, var(--mitilli-space-20));
}

.mitilli-faq details {
	border-top: 1px solid var(--mitilli-color-border);
}

.mitilli-faq details:last-child {
	border-bottom: 1px solid var(--mitilli-color-border);
}

.mitilli-faq summary {
	cursor: pointer;
	padding: var(--mitilli-space-5) var(--mitilli-space-8) var(--mitilli-space-5) 0;
	font-weight: var(--mitilli-font-weight-bold);
}

.mitilli-faq details p {
	max-width: var(--mitilli-reading-width);
	margin: 0 0 var(--mitilli-space-5);
	color: var(--mitilli-color-text-muted);
}

/* ---------- Product cards ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products,
.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(var(--mitilli-space-4), 2vw, var(--mitilli-space-6));
	margin: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.wc-block-grid__product {
	position: relative;
	display: flex;
	width: auto;
	min-width: 0;
	height: 100%;
	flex-direction: column;
	float: none;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-lg);
	background: var(--mitilli-color-white);
	box-shadow: var(--mitilli-shadow-sm);
	transition: border-color var(--mitilli-transition), box-shadow var(--mitilli-transition), transform var(--mitilli-transition);
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	border-color: var(--mitilli-color-action);
	box-shadow: var(--mitilli-shadow-md);
	transform: translateY(calc(-1 * var(--mitilli-space-1)));
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.wc-block-grid__product-link {
	display: block;
	color: var(--mitilli-color-text);
	text-decoration: none;
}

.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 1 / 1;
	background: var(--mitilli-color-surface-alt);
	object-fit: cover;
	transition: transform var(--mitilli-transition);
}

.woocommerce ul.products li.product:hover img,
.wc-block-grid__product:hover img {
	transform: scale(1.025);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	padding: var(--mitilli-space-4) var(--mitilli-space-5) 0;
	margin: 0;
	color: var(--mitilli-color-text);
	font-size: 1.0625rem;
	font-weight: var(--mitilli-font-weight-medium);
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.woocommerce ul.products li.product .product-details {
	display: flex;
	height: 100%;
	flex-direction: column;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--mitilli-space-1) var(--mitilli-space-2);
	padding: var(--mitilli-space-3) var(--mitilli-space-5) 0;
	margin: 0;
	color: var(--mitilli-color-text);
	font-size: 1.5rem;
	font-weight: var(--mitilli-font-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.022em;
	line-height: 1.1;
}

.woocommerce ul.products li.product .price .amount,
.wc-block-grid__product-price .amount {
	white-space: nowrap;
}

/*
 * Sello de unidad de venta sobre la fotografia. Se posiciona contra li.product
 * (que ya es position: relative), no contra la imagen, para no depender de
 * donde inserte Kadence el hook ni de la altura del thumbnail.
 */
.mitilli-unit-chip {
	position: absolute;
	z-index: 2;
	top: var(--mitilli-space-3);
	left: var(--mitilli-space-3);
	display: inline-flex;
	align-items: center;
	height: 1.625rem;
	padding-inline: var(--mitilli-space-2);
	border-radius: var(--mitilli-radius-sm);
	background: var(--mitilli-color-accent);
	color: var(--mitilli-color-action-hover);
	font-size: 0.6875rem;
	font-weight: var(--mitilli-font-weight-bold);
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
	pointer-events: none;
}

.mitilli-unidad-venta {
	color: var(--mitilli-color-text-muted);
	font-size: 0.8125rem;
	font-weight: var(--mitilli-font-weight-medium);
	letter-spacing: 0;
	white-space: nowrap;
}

.mitilli-tax-free-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 var(--mitilli-space-1);
	padding: 0 var(--mitilli-space-5);
	margin: var(--mitilli-space-2) 0 0;
	color: var(--mitilli-color-text-muted);
	font-size: 0.72rem;
	line-height: 1.35;
}

.mitilli-tax-free-price strong {
	font-weight: var(--mitilli-font-weight-medium);
}

.mitilli-tax-free-price__label {
	letter-spacing: 0.01em;
}

.mitilli-tax-free-price__value {
	display: inline-flex;
	align-items: baseline;
	gap: var(--mitilli-space-2);
	white-space: nowrap;
}

.woocommerce ul.products li.product .product-excerpt {
	display: none;
}

.woocommerce ul.products.woo-archive-action-on-hover li.product .product-details .product-action-wrap,
.woocommerce ul.products li.product .product-action-wrap {
	display: flex;
	position: static;
	width: auto;
	align-items: center;
	justify-content: space-between;
	gap: var(--mitilli-space-3);
	margin-top: auto;
	padding: var(--mitilli-space-4) var(--mitilli-space-5) var(--mitilli-space-5);
	opacity: 1;
	transform: none;
	transition: none;
}

.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .entry-content-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:focus-within .entry-content-wrap {
	transform: none;
}

/*
 * Kadence renderiza la accion de archivo como enlace de texto (fondo
 * transparente, sin borde, padding lateral 0) con reglas mas especificas que
 * las del child theme. Se recupera el solido compacto del sistema anclando la
 * regla al contenedor de accion para ganar en especificidad.
 */
.woocommerce ul.products li.product .product-action-wrap .button,
.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: inline-flex;
	width: auto;
	align-items: center;
	justify-content: center;
	gap: var(--mitilli-space-2);
	min-height: 2.5rem;
	padding: var(--mitilli-space-2) var(--mitilli-space-4);
	margin: 0 0 0 auto;
	border: 1px solid var(--mitilli-color-action);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-on-action);
	font-family: var(--mitilli-font-body);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-medium);
	letter-spacing: 0;
	line-height: 1.1;
	text-transform: none;
	white-space: nowrap;
}

.woocommerce ul.products li.product .product-action-wrap .button:hover,
.woocommerce ul.products li.product .button:hover {
	border-color: var(--mitilli-color-action-hover);
	background: var(--mitilli-color-action-hover);
	color: var(--mitilli-color-on-action);
}

/* Kadence agrega su propio iconset a la accion; sobra junto al sello y al precio. */
.woocommerce ul.products li.product .button .kadence-svg-iconset {
	display: none;
}

/* Accion secundaria: los productos con opciones mandan a la ficha, no al carrito. */
.woocommerce ul.products li.product .product-action-wrap .button.mitilli-choose-preparation,
.woocommerce ul.products li.product .button.mitilli-choose-preparation {
	min-width: 0;
	padding-inline: var(--mitilli-space-3);
	border-color: var(--mitilli-color-action);
	background: transparent;
	color: var(--mitilli-color-action);
}

.woocommerce ul.products li.product .button.mitilli-choose-preparation:hover {
	background: rgb(22 59 65 / 6%);
	color: var(--mitilli-color-action-hover);
}

/* Politica de venta a la izquierda de la accion ("Desde 0,5 kg"). */
.mitilli-loop-policy {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-xs);
	line-height: 1.3;
}

.woocommerce span.onsale,
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale,
.wc-block-components-totals-coupon,
.wc-block-components-totals-discount {
	display: none;
}

.stock.out-of-stock {
	display: inline-flex;
	align-items: center;
	padding: var(--mitilli-space-2) var(--mitilli-space-3);
	border-radius: var(--mitilli-radius-pill);
	background: var(--mitilli-color-surface-alt);
	color: var(--mitilli-color-error);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-bold);
}

/* ---------- Catalog and filters ---------- */
.woocommerce-shop #inner-wrap,
.tax-product_cat #inner-wrap,
.single-product #inner-wrap,
.woocommerce-cart #inner-wrap,
.woocommerce-checkout #inner-wrap,
.woocommerce-account #inner-wrap,
.page #inner-wrap {
	width: calc(100% - var(--mitilli-space-5) - var(--mitilli-space-5));
	max-width: var(--mitilli-container);
	margin-inline: auto;
	padding-block: clamp(var(--mitilli-space-8), 5vw, var(--mitilli-space-16));
}

.home #inner-wrap {
	width: 100%;
	padding: 0;
}

.woocommerce-products-header,
.entry-header {
	margin-bottom: var(--mitilli-space-8);
}

.mitilli-page-locales .entry-header,
.mitilli-page-como-comprar .entry-header,
.mitilli-page-contacto .entry-header,
.mitilli-page-componentes-storefront .entry-header {
	display: none;
}

/*
 * Titulos de archivo, pagina y ficha: comparten la voz de los titulos de
 * seccion. Sin esto quedaban en system-ui aunque --mitilli-font-heading ya
 * apunte a Storica, porque aca solo se fijaba el tamano.
 */
.woocommerce-products-header__title,
.entry-title,
.product_title,
.page-title,
.archive-title,
.entry-hero .entry-title {
	font-family: var(--mitilli-font-heading);
	font-size: var(--mitilli-font-size-3xl);
	font-weight: var(--mitilli-font-weight-bold);
	letter-spacing: var(--mitilli-letter-spacing-display);
	line-height: var(--mitilli-line-height-tight);
}

.product-archive-hero-section .entry-hero-container-inner {
	background: transparent;
}

.product-archive-hero-section .entry-hero-container-inner .entry-header {
	min-height: auto;
	align-items: flex-start;
	padding-block: clamp(var(--mitilli-space-8), 5vw, var(--mitilli-space-16)) var(--mitilli-space-6);
	text-align: left;
}

.woocommerce .woocommerce-result-count {
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-sm);
}

.woocommerce .woocommerce-ordering select {
	min-height: var(--mitilli-control-height);
	padding: var(--mitilli-space-2) var(--mitilli-space-8) var(--mitilli-space-2) var(--mitilli-space-3);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-white);
}

.kadence-woo-toggle {
	display: none;
}

.mitilli-catalog-tools {
	width: 16.5rem;
	float: left;
	margin: 0 var(--mitilli-space-10) var(--mitilli-space-8) 0;
}

.mitilli-filter-toggle,
.mitilli-filter-panel__header,
.mitilli-filter-overlay {
	display: none;
}

.mitilli-filter-panel {
	position: sticky;
	top: var(--mitilli-space-5);
	padding: var(--mitilli-space-5);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-surface);
}

.mitilli-filter-panel fieldset {
	padding: 0;
	margin: 0;
	border: 0;
}

.mitilli-filter-panel fieldset + fieldset {
	padding-top: var(--mitilli-space-5);
	margin-top: var(--mitilli-space-5);
	border-top: 1px solid var(--mitilli-color-border);
}

.mitilli-filter-panel legend {
	margin-bottom: var(--mitilli-space-3);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-bold);
}

.mitilli-filter-panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mitilli-filter-panel a {
	display: block;
	padding: var(--mitilli-space-2) var(--mitilli-space-3);
	margin-inline: calc(-1 * var(--mitilli-space-3));
	border-radius: var(--mitilli-radius-sm);
	color: var(--mitilli-color-text);
	font-size: var(--mitilli-font-size-sm);
	text-decoration: none;
}

.mitilli-filter-panel a:hover {
	background: rgb(22 59 65 / 5%);
}

/* El filtro aplicado se lee de un vistazo, no por un cambio de peso. */
/* Se ancla a .mitilli-filter-category para ganarle a la regla de
   .has-children, que pinta el enlace del color del texto y dejaba la etiqueta
   verde sobre la pastilla verde. */
.mitilli-filter-panel a[aria-current="true"],
.mitilli-filter-panel .mitilli-filter-category a[aria-current="true"],
.mitilli-filter-panel .mitilli-filter-category.has-children > a[aria-current="true"] {
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-on-action);
}

.mitilli-filter-panel a[aria-current="true"] span,
.mitilli-filter-panel a[aria-current="true"] small {
	color: inherit;
}

.mitilli-filter-panel a[aria-current="true"] small {
	opacity: 0.72;
}

/* El activo ya se resuelve con la pastilla verde de arriba; aca solo el peso.
   Fijar el color aca volvia a pintar verde sobre verde. */
.mitilli-filter-panel a:hover {
	color: var(--mitilli-color-action);
}

.mitilli-filter-panel a[aria-current="true"] {
	font-weight: var(--mitilli-font-weight-medium);
}

.mitilli-filter-category a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mitilli-space-2);
}

.mitilli-filter-category.has-children > a {
	color: var(--mitilli-color-text);
	font-weight: var(--mitilli-font-weight-bold);
}

.mitilli-filter-category--depth-1 a,
.mitilli-filter-category--depth-2 a {
	padding-left: var(--mitilli-space-3);
	border-left: 1px solid var(--mitilli-color-border);
}

.mitilli-filter-category a small {
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-xs);
	font-weight: var(--mitilli-font-weight-normal);
}

.mitilli-price-filter {
	display: grid;
	gap: var(--mitilli-space-3);
}

.mitilli-price-filter label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mitilli-space-2);
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-xs);
}

.mitilli-price-filter output {
	color: var(--mitilli-color-text);
	font-weight: var(--mitilli-font-weight-bold);
}

.mitilli-price-filter input[type="range"] {
	width: 100%;
	min-height: auto;
	padding: 0;
	border: 0;
	accent-color: var(--mitilli-color-action);
	background: transparent;
}

.mitilli-price-filter button {
	width: 100%;
	min-height: 2.5rem;
	padding: var(--mitilli-space-2) var(--mitilli-space-3);
	font-size: var(--mitilli-font-size-sm);
}

.mitilli-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mitilli-space-2);
	margin-bottom: var(--mitilli-space-4);
}

.mitilli-active-filters a {
	display: inline-flex;
	align-items: center;
	gap: var(--mitilli-space-2);
	padding: var(--mitilli-space-2) var(--mitilli-space-3);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-pill);
	background: var(--mitilli-color-surface-alt);
	color: var(--mitilli-color-text);
	font-size: var(--mitilli-font-size-xs);
	text-decoration: none;
}

.mitilli-active-filters .mitilli-active-filters__clear {
	border-color: transparent;
	background: transparent;
	color: var(--mitilli-color-action);
	text-decoration: underline;
}

.woocommerce-shop .products,
.tax-product_cat .products,
.woocommerce-shop .woocommerce-pagination,
.tax-product_cat .woocommerce-pagination {
	width: calc(100% - 16rem);
	float: right;
}

/*
 * Tres columnas en el archivo: con el rail de filtros al lado, cuatro columnas
 * dejaban la fotografia en 226 px. En una tienda de comida la foto vende, asi
 * que se prioriza tamano sobre densidad.
 */
/*
 * Tres columnas en el archivo: con el rail al lado, cuatro dejaban la
 * fotografia en 226 px, y en una tienda de comida la foto vende.
 *
 * float: none es necesario. Kadence deja la lista con float: right y un ancho
 * calculado que supera por unos pocos pixeles el espacio libre junto al rail
 * flotado, asi que la grilla caia entera debajo de los filtros. Siendo una
 * grilla, el float no aporta nada: sin el, el contenedor se ubica al lado del
 * rail y toma el ancho disponible.
 */
.woocommerce-shop ul.products,
.tax-product_cat ul.products {
	clear: none !important;
	float: none !important;
	width: auto;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.woocommerce nav.woocommerce-pagination {
	margin-top: var(--mitilli-space-10);
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: var(--mitilli-space-1);
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	min-width: var(--mitilli-tap-target);
	height: var(--mitilli-tap-target);
	place-items: center;
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	border-color: var(--mitilli-color-action);
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-white);
}

/* ---------- Product detail ---------- */
.single-product div.product {
	display: block;
}

.single-product div.product::before,
.single-product div.product::after {
	display: none;
}

.single-product .product-above {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
	gap: clamp(var(--mitilli-space-8), 6vw, var(--mitilli-space-16));
}

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
	width: auto;
	float: none;
}

.single-product div.product .summary {
	position: sticky;
	top: var(--mitilli-space-5);
	align-self: start;
}

/*
 * Foto y caja de compra lado a lado. Pestañas y relacionados viven FUERA de
 * este contenedor (mitilli_relacionados_fuera_del_producto): un elemento
 * sticky acompaña al bajar hasta el final de su contenedor, y cuando los
 * relacionados estaban adentro la caja de compra se les montaba encima.
 * La columna más corta (casi siempre la foto) queda fija mientras se lee la
 * otra.
 */
@media (min-width: 60rem) {
	.single-product div.product {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--mitilli-space-12);
		align-items: start;
	}

	.single-product div.product > * {
		grid-column: 1 / -1;
	}

	/* Le gana a «.woocommerce div.product div.images(.woocommerce-product-gallery)»
	   de WooCommerce, que fija 48 % de ancho y position: relative. */
	body.single-product div.product > div.images.woocommerce-product-gallery {
		position: sticky;
		top: var(--mitilli-space-5);
		width: 100%;
		grid-column: 1;
		margin-bottom: 0;
	}

	body.single-product div.product > div.summary {
		width: 100%;
		grid-column: 2;
	}
}

.single-product .product_title {
	margin-bottom: var(--mitilli-space-4);
	font-size: var(--mitilli-font-size-2xl);
	line-height: var(--mitilli-line-height-tight);
}

.single-product div.product .price {
	margin: 0;
	color: var(--mitilli-color-text);
	font-size: var(--mitilli-font-size-2xl);
	font-weight: var(--mitilli-font-weight-bold);
}

.single-product .mitilli-tax-free-price {
	padding: 0;
	margin-top: var(--mitilli-space-2);
}

.single-product div.product .woocommerce-product-gallery__wrapper,
.single-product div.product .woocommerce-product-gallery__image img {
	border-radius: var(--mitilli-radius-lg);
	background: var(--mitilli-color-surface-alt);
}

/*
 * Panel unico de decision: precio -> cantidad y preparacion -> subtotal ->
 * accion, en ese orden y dentro del mismo recuadro. Antes el precio vivia
 * suelto arriba y esta caja empezaba en la preparacion, asi que para decidir
 * habia que leer arriba, bajar y volver a subir.
 */
/*
 * No es sticky: dentro del resumen se montaba sobre el texto de abajo. Lo que
 * acompaña al bajar es el resumen entero (ver «Foto y caja de compra»).
 */
.single-product div.product form.cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mitilli-space-4);
	padding: var(--mitilli-space-6);
	margin: var(--mitilli-space-6) 0;
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-lg);
	background: var(--mitilli-color-white);
	box-shadow: var(--mitilli-shadow-sm);
}

/* El precio manda dentro del panel. */
.single-product div.product form.cart > .price {
	margin: 0;
	color: var(--mitilli-color-text);
	font-size: 2.375rem;
	font-weight: var(--mitilli-font-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.025em;
	line-height: 1;
}

.single-product div.product form.cart > .price .mitilli-unidad-venta {
	font-size: var(--mitilli-font-size-base);
}

.single-product div.product form.cart .mitilli-preparacion,
.single-product div.product form.cart .quantity {
	grid-column: 1 / -1;
}

/* Hooks place quantity, preparation and subtotal in the same DOM and visual order. */
.single-product div.product form.cart .mitilli-tax-free-price {
	margin: 0;
	padding: 0;
}

.single-product div.product form.cart .quantity {
	display: flex;
	align-items: center;
	gap: var(--mitilli-space-2);
}

.mitilli-quantity-label {
	margin-right: auto;
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-medium);
}

.single-product div.product form.cart .quantity input {
	width: 4rem;
	min-height: var(--mitilli-control-height);
	padding-inline: var(--mitilli-space-3);
	border: 1px solid var(--mitilli-color-border-strong);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-white);
	/* Con el gris de Kadence el «1» parecía un placeholder vacío. */
	color: var(--mitilli-color-text);
	font-size: var(--mitilli-font-size-base);
	font-weight: var(--mitilli-font-weight-medium);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.single-product div.product form.cart .mitilli-quantity-step {
	width: var(--mitilli-tap-target);
	min-width: var(--mitilli-tap-target);
	padding: 0;
	border: 1px solid var(--mitilli-color-border-strong);
	background: var(--mitilli-color-surface-alt);
	color: var(--mitilli-color-action);
	font-size: var(--mitilli-font-size-xl);
}

.single-product div.product form.cart .single_add_to_cart_button {
	width: 100%;
}

.mitilli-preparacion {
	display: grid;
	gap: var(--mitilli-space-4);
	padding-bottom: var(--mitilli-space-2);
}

.mitilli-preparacion__campo {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mitilli-preparacion__campo legend {
	margin-bottom: var(--mitilli-space-2);
	padding: 0;
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-bold);
}

/* Opciones como botones: todas visibles, una sola elegible. */
.mitilli-preparacion__opciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mitilli-space-2);
}

.mitilli-preparacion__opcion {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.mitilli-preparacion__opcion input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.mitilli-preparacion__opcion span {
	display: inline-flex;
	min-height: var(--mitilli-tap-target);
	align-items: center;
	padding: 0 var(--mitilli-space-4);
	border: 1px solid var(--mitilli-color-border-strong);
	border-radius: var(--mitilli-radius-pill);
	background: var(--mitilli-color-white);
	color: var(--mitilli-color-text);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-medium);
	line-height: 1.2;
	transition: background-color var(--mitilli-transition-fast), border-color var(--mitilli-transition-fast), color var(--mitilli-transition-fast);
}

.mitilli-preparacion__opcion:hover span {
	border-color: var(--mitilli-color-action);
}

.mitilli-preparacion__opcion input:checked + span {
	border-color: var(--mitilli-color-action);
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-on-action);
}

.mitilli-preparacion__opcion input:focus-visible + span {
	outline: 3px solid var(--mitilli-color-surface);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--mitilli-color-action);
}

/* Sándwiches de miga: un contador por gusto y la promo 14 × 12 (Mitilli_Sandwiches). */
.single-product div.product form.cart .mitilli-sandwiches {
	display: grid;
	grid-column: 1 / -1;
	gap: var(--mitilli-space-3);
	scroll-margin-top: var(--mitilli-space-8);
}

.single-product div.product form.cart .mitilli-sandwiches__promo {
	margin: 0;
	padding: var(--mitilli-space-3) var(--mitilli-space-4);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-surface-alt);
	font-size: var(--mitilli-font-size-sm);
}

.single-product div.product form.cart .mitilli-sandwiches__campo {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.single-product div.product form.cart .mitilli-sandwiches__campo legend {
	margin-bottom: var(--mitilli-space-2);
	padding: 0;
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-bold);
}

.single-product div.product form.cart .mitilli-sandwiches__gustos {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product div.product form.cart .mitilli-sandwiches__gusto {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mitilli-space-3);
	padding-block: var(--mitilli-space-2);
	border-bottom: 1px solid var(--mitilli-color-border);
	font-size: var(--mitilli-font-size-sm);
}

/* Un contador por pan en cada gusto (D-058): el pan arriba, chico. */
.single-product div.product form.cart .mitilli-sandwiches__panes {
	display: flex;
	flex-shrink: 0;
	gap: var(--mitilli-space-2);
}

.single-product div.product form.cart .mitilli-sandwiches__pan {
	display: grid;
	justify-items: center;
	gap: var(--mitilli-space-1);
}

.single-product div.product form.cart .mitilli-sandwiches__pan label {
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-xs);
	line-height: 1.2;
}

/* Se apila según el ancho del formulario, no de la pantalla: en tablet la
   columna del producto también es angosta. */
.single-product div.product form.cart .mitilli-sandwiches__campo {
	container-type: inline-size;
}

@container (max-width: 30rem) {
	.single-product div.product form.cart .mitilli-sandwiches__gusto {
		flex-direction: column;
		align-items: stretch;
		gap: var(--mitilli-space-2);
	}

	.single-product div.product form.cart .mitilli-sandwiches__panes > .mitilli-sandwiches__pan {
		flex: 1 1 0;
	}

	.single-product div.product form.cart .mitilli-sandwiches__pan .mitilli-qty-controls {
		width: 100%;
		grid-template-columns: var(--mitilli-tap-target) 1fr var(--mitilli-tap-target);
	}
}

.single-product div.product form.cart .mitilli-sandwiches .mitilli-qty-controls {
	flex-shrink: 0;
	margin-top: 0;
	background: var(--mitilli-color-white);
}

.single-product div.product form.cart .mitilli-sandwiches .mitilli-qty-controls input {
	width: 100%;
	min-height: var(--mitilli-tap-target);
	padding: 0;
	border: 0;
	background: transparent;
	font-size: var(--mitilli-font-size-base);
	font-variant-numeric: tabular-nums;
	text-align: center;
	-moz-appearance: textfield;
}

.single-product div.product form.cart .mitilli-sandwiches .mitilli-qty-controls input::-webkit-inner-spin-button,
.single-product div.product form.cart .mitilli-sandwiches .mitilli-qty-controls input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.single-product div.product form.cart .mitilli-sandwiches .mitilli-qty-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.single-product div.product form.cart .mitilli-sandwiches__resumen {
	margin: 0;
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-medium);
}

.single-product div.product form.cart .mitilli-sandwiches__resumen.is-regalo {
	color: var(--mitilli-color-action);
	font-weight: var(--mitilli-font-weight-bold);
}

.mitilli-sandwiches__promo-grilla,
body.mitilli-storefront ul.products li.product .product-details .mitilli-sandwiches__promo-grilla {
	margin: var(--mitilli-space-1) 0 0;
	padding-inline: var(--mitilli-card-pad);
	color: var(--mitilli-color-action);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-bold);
}

/* El carrito y el checkout ya detallan la línea: sin repetir la descripción corta del producto. */
.wc-block-cart .wc-block-components-product-metadata__description,
.wc-block-checkout .wc-block-components-product-metadata__description {
	display: none;
}

/* Subtotal estimado de la ficha: el dato que hoy el cliente calcula de cabeza. */
.mitilli-subtotal-estimado {
	display: flex;
	width: 100%;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mitilli-space-4);
	padding-top: var(--mitilli-space-4);
	margin-block: var(--mitilli-space-2) var(--mitilli-space-4);
	border-top: 1px solid var(--mitilli-color-border);
}

.mitilli-subtotal-estimado__label {
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-sm);
}

.mitilli-subtotal-estimado__valor {
	color: var(--mitilli-color-text);
	font-size: var(--mitilli-font-size-xl);
	font-weight: var(--mitilli-font-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* Descripción + ficha técnica compacta, junto a la compra. */
.mitilli-product-facts {
	display: grid;
	gap: var(--mitilli-space-4);
	padding: var(--mitilli-space-5) 0;
	border-block: 1px solid var(--mitilli-color-border);
}

.mitilli-product-facts__description p {
	margin: 0 0 var(--mitilli-space-2);
	color: var(--mitilli-color-text);
	font-size: var(--mitilli-font-size-base);
	line-height: var(--mitilli-line-height-body);
}

.mitilli-product-facts__description p:last-child {
	margin-bottom: 0;
}

.mitilli-product-facts dl {
	display: grid;
	gap: 0;
	margin: 0;
}

.mitilli-product-facts dl > div {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: var(--mitilli-space-3);
	padding: var(--mitilli-space-2) 0;
	border-top: 1px solid var(--mitilli-color-border-subtle);
	font-size: var(--mitilli-font-size-sm);
	line-height: 1.4;
}

.mitilli-product-facts dl > div:first-child {
	border-top: 0;
}

.mitilli-product-facts dt {
	color: var(--mitilli-color-text-muted);
	font-weight: var(--mitilli-font-weight-medium);
}

.mitilli-product-facts dd {
	margin: 0;
	color: var(--mitilli-color-text);
}

/* D-040: Storica gobierna todos los títulos, también los que imprime WooCommerce. */
body.mitilli-storefront .related > h2,
body.mitilli-storefront .up-sells > h2,
body.mitilli-storefront .cross-sells > h2,
body.mitilli-storefront .woocommerce-tabs h2,
body.mitilli-storefront .woocommerce-MyAccount-content h2,
body.mitilli-storefront .woocommerce-order-details__title,
body.mitilli-storefront .woocommerce-column__title,
body.mitilli-storefront .mitilli-empty-catalog h2 {
	font-family: var(--mitilli-font-heading);
	font-size: var(--mitilli-font-size-2xl);
	font-weight: var(--mitilli-font-weight-bold);
	letter-spacing: var(--mitilli-letter-spacing-display);
	line-height: var(--mitilli-line-height-heading);
	text-transform: uppercase;
}

.single-product .product_meta {
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-sm);
}

.single-product .woocommerce-tabs,
.single-product .related {
	margin-top: var(--mitilli-section-space);
}

body.single-product .woocommerce-tabs ul.tabs li a {
	color: var(--mitilli-color-text-muted) !important;
	opacity: 1 !important;
}

body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--mitilli-color-action) !important;
}

.mitilli-mobile-buy {
	display: none;
}

/* ---------- Mini cart ---------- */
.mitilli-drawer-overlay {
	position: fixed;
	z-index: 9990;
	inset: 0;
	background: var(--mitilli-color-overlay);
	opacity: 0;
	transition: opacity var(--mitilli-transition);
}

.mitilli-drawer-overlay.is-active {
	opacity: 1;
}

.mitilli-cart-drawer {
	position: fixed;
	z-index: 9991;
	top: 0;
	right: 0;
	display: grid;
	width: min(29rem, 100%);
	height: 100dvh;
	grid-template-rows: auto minmax(0, 1fr);
	background: var(--mitilli-color-surface);
	box-shadow: var(--mitilli-shadow-lg);
	pointer-events: none;
	transform: translateX(105%);
	transition: transform var(--mitilli-transition);
}

.mitilli-cart-drawer.is-active {
	pointer-events: auto;
	transform: translateX(0);
}

.mitilli-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mitilli-space-4);
	padding: var(--mitilli-space-5);
	border-bottom: 1px solid var(--mitilli-color-border);
}

.mitilli-drawer-header h2 {
	margin: 0;
	font-size: var(--mitilli-font-size-xl);
}

.mitilli-drawer-header .mitilli-eyebrow {
	margin-bottom: var(--mitilli-space-1);
}

.mitilli-drawer-body {
	overflow: auto;
	overscroll-behavior: contain;
	padding: var(--mitilli-space-5);
}

.mitilli-cart-drawer .woocommerce-mini-cart {
	display: grid;
	gap: var(--mitilli-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Ítem del carrito lateral: foto a la izquierda y, en la columna de la
 * derecha, nombre → preparación → «2,5 kg × $15.500» con el total → cantidad.
 * WooCommerce envuelve foto y nombre en el mismo enlace; con
 * `display: contents` cada uno toma su columna. Antes el detalle caía en la
 * columna de la foto (88 px) y se leía de a una palabra por línea.
 */
.mitilli-cart-drawer .mini_cart_item {
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	align-items: start;
	gap: var(--mitilli-space-2) var(--mitilli-space-4);
	padding: 0 2.5rem var(--mitilli-space-4) 0;
	border-bottom: 1px solid var(--mitilli-color-border);
}

.mitilli-cart-drawer .mini_cart_item > a:not(.remove) {
	display: contents;
	color: var(--mitilli-color-text);
	font-size: var(--mitilli-font-size-base);
	font-weight: var(--mitilli-font-weight-bold);
	line-height: var(--mitilli-line-height-heading);
	text-decoration: none;
}

.mitilli-cart-drawer ul.woocommerce-mini-cart li.mini_cart_item img {
	float: none;
	grid-column: 1;
	grid-row: 1 / span 3;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0;
	border-radius: var(--mitilli-radius-sm);
	object-fit: cover;
}

.mitilli-cart-drawer ul.woocommerce-mini-cart li.mini_cart_item dl.variation {
	display: flex;
	flex-wrap: wrap;
	grid-column: 2;
	gap: 0 var(--mitilli-space-1);
	margin: 0;
	padding: 0; /* WooCommerce le pone sangría y borde de lista. */
	border: 0;
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-sm);
	line-height: var(--mitilli-line-height-body);
}

.mitilli-cart-drawer ul.woocommerce-mini-cart li.mini_cart_item dl.variation dt,
.mitilli-cart-drawer ul.woocommerce-mini-cart li.mini_cart_item dl.variation dd {
	float: none;
	padding: 0;
}

/* La pregunta («¿Cómo querés tu corte?») queda para lectores de pantalla: a
   la vista alcanza con la respuesta, «Entero · Pan negro». */
.mitilli-cart-drawer ul.woocommerce-mini-cart li.mini_cart_item dl.variation dt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mitilli-cart-drawer ul.woocommerce-mini-cart li.mini_cart_item dl.variation dd ~ dd::before {
	color: var(--mitilli-color-text-muted);
	content: "·";
}

.mitilli-cart-drawer ul.woocommerce-mini-cart li.mini_cart_item dl.variation dd {
	display: inline-flex;
	gap: var(--mitilli-space-1);
	margin: 0 var(--mitilli-space-1) 0 0;
	color: var(--mitilli-color-text);
	font-weight: var(--mitilli-font-weight-bold);
}

.mitilli-cart-drawer ul.woocommerce-mini-cart li.mini_cart_item dl.variation dd p {
	margin: 0;
}

/* Cantidad a la izquierda; «1 kg × $15.500» y el total a la derecha. */
.mitilli-cart-drawer .mitilli-mini-cart-policy {
	display: flex;
	flex-wrap: wrap;
	grid-column: 2;
	align-items: center;
	justify-content: space-between;
	gap: var(--mitilli-space-2) var(--mitilli-space-3);
	margin-top: var(--mitilli-space-1);
}

.mitilli-cart-drawer .mitilli-mini-cart-policy .quantity[hidden] {
	display: none;
}

.mitilli-cart-drawer .mitilli-mini-cart-line {
	display: grid;
	order: 2;
	justify-items: end;
	gap: 0;
	margin-left: auto;
	text-align: right;
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-sm);
	font-variant-numeric: tabular-nums;
}

.mitilli-cart-drawer .mitilli-mini-cart-line strong {
	color: var(--mitilli-color-text);
	font-size: var(--mitilli-font-size-base);
}

.mitilli-cart-drawer .mitilli-mini-cart-policy .mitilli-qty-controls {
	grid-template-columns: var(--mitilli-tap-target) minmax(3.5rem, auto) var(--mitilli-tap-target);
	justify-self: start;
	margin-top: 0;
}

.mitilli-cart-drawer a.remove {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	width: var(--mitilli-tap-target);
	height: var(--mitilli-tap-target);
	place-items: center;
	color: var(--mitilli-color-error);
	font-size: var(--mitilli-font-size-lg);
	text-decoration: none;
}

.mitilli-cart-drawer .woocommerce-mini-cart__total {
	padding-top: var(--mitilli-space-5);
	border-top: 1px solid var(--mitilli-color-border);
	font-size: var(--mitilli-font-size-lg);
}

/* Uno debajo del otro: «Seguir comprando · faltan $34.500» entra en una línea. */
.mitilli-cart-drawer .woocommerce-mini-cart__buttons {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mitilli-space-2);
}

.mitilli-cart-drawer .woocommerce-mini-cart__empty-message {
	padding: var(--mitilli-space-12) var(--mitilli-space-4);
	color: var(--mitilli-color-text-muted);
	text-align: center;
}

.mitilli-qty-controls {
	display: inline-grid;
	grid-template-columns: var(--mitilli-tap-target) 2.75rem var(--mitilli-tap-target);
	align-items: center;
	margin-top: var(--mitilli-space-3);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
	overflow: hidden;
}

.mitilli-qty-btn {
	min-height: var(--mitilli-tap-target);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--mitilli-color-text);
}

.mitilli-qty-btn:hover {
	background: var(--mitilli-color-surface-alt);
	color: var(--mitilli-color-text);
}

.mitilli-qty-value {
	text-align: center;
}

/* ---------- Cart, checkout, and confirmation ---------- */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
	margin-top: 0;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: var(--mitilli-font-body);
}

.wc-block-components-sidebar-layout {
	gap: clamp(var(--mitilli-space-6), 5vw, var(--mitilli-space-12));
}

.wc-block-components-sidebar,
.wc-block-components-main {
	padding: 0;
}

@media (min-width: 60rem) {
	.wc-block-components-sidebar-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem);
		align-items: start;
	}

	.wc-block-components-sidebar-layout .wc-block-components-main,
	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: auto;
		margin: 0;
	}
}

.wc-block-components-order-summary,
.wc-block-cart-items,
.wc-block-components-totals-wrapper,
.wc-block-checkout__payment-method,
.woocommerce-order {
	border-color: var(--mitilli-color-border);
}

.wc-block-components-totals-wrapper,
.wc-block-checkout__payment-method,
.woocommerce-order {
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-white);
}

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	min-height: var(--mitilli-control-height);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-white);
	color: var(--mitilli-color-text);
}

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	min-height: 3.25rem;
	font-size: var(--mitilli-font-size-lg);
}

.wc-block-components-address-form__company,
.wc-block-components-address-form__address_2,
.wc-block-components-order-summary-coupon-form-block,
.wc-block-components-totals-coupon,
.woocommerce-form-coupon-toggle,
.checkout_coupon {
	display: none;
}

.woocommerce-order-received .woocommerce-order {
	max-width: 58rem;
	padding: clamp(var(--mitilli-space-5), 5vw, var(--mitilli-space-10));
	margin-inline: auto;
	box-shadow: var(--mitilli-shadow-sm);
}

.woocommerce-order-received .woocommerce-notice--success {
	font-size: var(--mitilli-font-size-xl);
	font-weight: var(--mitilli-font-weight-bold);
}

/* ---------- Messages and component states ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner,
.mitilli-state-card {
	padding: var(--mitilli-space-4) var(--mitilli-space-5);
	border: 1px solid var(--mitilli-color-border);
	border-left-width: var(--mitilli-space-1);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-white);
	color: var(--mitilli-color-text);
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-left-color: var(--mitilli-color-success);
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	border-left-color: var(--mitilli-color-info);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error,
.mitilli-state-card.is-error {
	border-left-color: var(--mitilli-color-error);
}

.mitilli-state-card.is-warning,
.mitilli-state-card.is-pending {
	border-left-color: var(--mitilli-color-warning);
}

.mitilli-state-card.is-loading {
	border-left-color: var(--mitilli-color-info);
}

.mitilli-state-card.is-loading > span {
	display: block;
	width: 2rem;
	height: 2rem;
	border: 3px solid var(--mitilli-color-border);
	border-top-color: var(--mitilli-color-action);
	border-radius: var(--mitilli-radius-pill);
	animation: mitilli-spin 900ms linear infinite;
}

@keyframes mitilli-spin {
	to { transform: rotate(360deg); }
}

.mitilli-state-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mitilli-space-4);
}

.mitilli-state-card h2,
.mitilli-state-card h3 {
	margin: var(--mitilli-space-3) 0 var(--mitilli-space-2);
	font-size: var(--mitilli-font-size-lg);
}

.mitilli-state-card p {
	min-height: 3rem;
	color: var(--mitilli-color-text-muted);
}

.mitilli-component-fixture {
	padding-bottom: var(--mitilli-section-space);
}

.mitilli-fixture-section {
	padding: var(--mitilli-space-10) 0;
	border-top: 1px solid var(--mitilli-color-border);
}

.mitilli-fixture-section > h2 {
	margin: 0 0 var(--mitilli-space-6);
	font-size: var(--mitilli-font-size-2xl);
}

.mitilli-fixture-toolbar,
.mitilli-fixture-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mitilli-space-3);
}

.mitilli-fixture-toolbar .is-fixture-hover,
.mitilli-fixture-chips .is-fixture-hover {
	border-color: var(--mitilli-color-action-hover);
	background: var(--mitilli-color-action-hover);
	color: var(--mitilli-color-white);
}

.mitilli-fixture-toolbar .is-fixture-focus,
.mitilli-fixture-field-grid .is-fixture-focus {
	outline: 3px solid var(--mitilli-color-surface);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--mitilli-color-action);
}

.mitilli-fixture-toolbar .is-fixture-active {
	transform: translateY(1px);
}

.mitilli-fixture-toolbar :disabled {
	cursor: not-allowed;
	opacity: 0.58;
}

.mitilli-fixture-field-grid,
.mitilli-fixture-choice-grid,
.mitilli-fixture-quantity-grid,
.mitilli-fixture-status-grid,
.mitilli-fixture-placeholder-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mitilli-space-5);
}

.mitilli-fixture-field-grid label,
.mitilli-fixture-choice-grid label {
	display: grid;
	gap: var(--mitilli-space-2);
	font-weight: var(--mitilli-font-weight-bold);
}

.mitilli-fixture-field-grid input,
.mitilli-fixture-field-grid select,
.mitilli-fixture-field-grid textarea {
	width: 100%;
	min-height: var(--mitilli-control-height);
	padding: var(--mitilli-space-3);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-white);
	color: var(--mitilli-color-text);
	font: inherit;
}

.mitilli-fixture-field-grid [aria-invalid="true"] {
	border-color: var(--mitilli-color-error);
}

.mitilli-fixture-field-grid small,
.mitilli-fixture-quantity-grid .is-error p {
	color: var(--mitilli-color-error);
}

.mitilli-fixture-field-wide {
	grid-column: span 2;
}

.mitilli-fixture-choice-grid fieldset {
	display: grid;
	gap: var(--mitilli-space-3);
	padding: var(--mitilli-space-5);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
}

.mitilli-fixture-choice-grid label {
	grid-template-columns: auto 1fr;
	align-items: center;
	font-weight: var(--mitilli-font-weight-normal);
}

.mitilli-fixture-choice-grid :is(input[type="radio"], input[type="checkbox"]) {
	width: 1.25rem;
	height: 1.25rem;
}

.mitilli-fixture-quantity-grid > div,
.mitilli-fixture-status-grid > article,
.mitilli-fixture-status-grid > div {
	padding: var(--mitilli-space-5);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-white);
}

.mitilli-fixture-quantity-grid .mitilli-qty-controls {
	margin-top: var(--mitilli-space-3);
}

.mitilli-fixture-chips a,
.mitilli-fixture-chips button {
	display: inline-flex;
	min-height: var(--mitilli-tap-target);
	align-items: center;
	gap: var(--mitilli-space-2);
	padding: var(--mitilli-space-2) var(--mitilli-space-4);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-pill);
	background: var(--mitilli-color-white);
	color: var(--mitilli-color-text);
	text-decoration: none;
}

.mitilli-fixture-chips .is-active {
	border-color: var(--mitilli-color-action);
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-white);
}

.mitilli-fixture-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--mitilli-space-5);
}

.mitilli-fixture-product-grid article {
	display: flex;
	min-width: 0;
	flex-direction: column;
	padding: var(--mitilli-space-4);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-surface);
}

.mitilli-fixture-product-grid img,
.mitilli-fixture-skeleton {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--mitilli-radius-sm);
	background: var(--mitilli-color-surface-alt);
	object-fit: cover;
}

.mitilli-fixture-product-grid h3 {
	margin: var(--mitilli-space-2) 0;
	font-size: var(--mitilli-font-size-lg);
}

.mitilli-fixture-product-grid .mitilli-eyebrow {
	margin-top: var(--mitilli-space-4);
}

.mitilli-fixture-product-grid :is(button, .mitilli-button) {
	margin-top: auto;
}

.mitilli-fixture-product-grid .is-out-of-stock img {
	filter: grayscale(1);
	opacity: 0.66;
}

.mitilli-fixture-skeleton,
.mitilli-fixture-skeleton-line {
	animation: mitilli-pulse 1.2s ease-in-out infinite alternate;
}

.mitilli-fixture-skeleton-line {
	width: 70%;
	height: 1rem;
	border-radius: var(--mitilli-radius-pill);
	background: var(--mitilli-color-border);
}

@keyframes mitilli-pulse {
	to { opacity: 0.48; }
}

.mitilli-fixture-price {
	display: flex;
	max-width: 32rem;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mitilli-space-2);
	padding: var(--mitilli-space-6);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-white);
}

.mitilli-fixture-price strong {
	font-size: var(--mitilli-font-size-2xl);
}

.mitilli-fixture-price small,
.mitilli-fixture-price em {
	flex-basis: 100%;
	color: var(--mitilli-color-text-muted);
}

.mitilli-fixture-status-grid > :is(article, div).is-selected {
	border-color: var(--mitilli-color-action);
	box-shadow: inset 0 0 0 2px var(--mitilli-color-action);
}

.mitilli-fixture-status-grid > :is(article, div).is-error {
	border-left: var(--mitilli-space-1) solid var(--mitilli-color-error);
}

.mitilli-fixture-status-grid > :is(article, div).is-warning {
	border-left: var(--mitilli-space-1) solid var(--mitilli-color-warning);
}

.mitilli-fixture-status-grid h3 {
	margin: 0 0 var(--mitilli-space-2);
	font-size: var(--mitilli-font-size-lg);
}

.mitilli-fixture-status-grid p {
	margin: 0;
	color: var(--mitilli-color-text-muted);
}

.mitilli-fixture-placeholder-grid figure {
	margin: 0;
	text-align: center;
}

.mitilli-fixture-placeholder-grid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
	object-fit: cover;
}

.mitilli-fixture-placeholder-grid figcaption {
	margin-top: var(--mitilli-space-2);
	font-weight: var(--mitilli-font-weight-bold);
}

.mitilli-fixture-controls {
	display: grid;
	max-width: 44rem;
	gap: var(--mitilli-space-4);
	margin-top: var(--mitilli-space-10);
}

.mitilli-fixture-controls label,
.mitilli-legal-form label {
	display: grid;
	gap: var(--mitilli-space-2);
	font-weight: var(--mitilli-font-weight-bold);
}

.mitilli-fixture-controls input,
.mitilli-legal-form input,
.mitilli-legal-form textarea {
	width: 100%;
	min-height: var(--mitilli-control-height);
	padding: var(--mitilli-space-3);
	border: 1px solid var(--mitilli-color-border);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-white);
}

/* ---------- Institutional pages and branches ---------- */
.mitilli-page-intro {
	max-width: var(--mitilli-reading-width);
	margin-bottom: clamp(var(--mitilli-space-8), 6vw, var(--mitilli-space-16));
}

.mitilli-page-intro h1 {
	font-size: var(--mitilli-font-size-3xl);
}

.mitilli-page-intro > p:last-child {
	margin: var(--mitilli-space-5) 0 0;
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-lg);
}

.mitilli-page-intro--media {
	display: grid;
	max-width: none;
	grid-template-columns: minmax(0, 0.86fr) minmax(20rem, 1.14fr);
	align-items: center;
	gap: clamp(var(--mitilli-space-8), 6vw, var(--mitilli-space-20));
}

.mitilli-page-intro--media > div > p:last-child {
	margin: var(--mitilli-space-5) 0 0;
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-lg);
}

.mitilli-page-intro--media figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--mitilli-radius-lg);
	background: var(--mitilli-color-surface-alt);
}

.mitilli-page-intro--media img {
	width: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	object-position: 50% 66%;
}

.mitilli-page-intro--media figcaption {
	padding: var(--mitilli-space-3) var(--mitilli-space-4);
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-sm);
}

/* Split de "Nuestros locales": la fachada a la izquierda, las sucursales a la
   derecha. Es la fotografia mas de marca que hay y aca si persuade. */
.mitilli-locales-split {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(var(--mitilli-space-8), 4vw, var(--mitilli-space-12));
}

/* La fachada acompaña el recorrido por las tres tarjetas (sticky) con una
   proporción fija: estirada al alto de la lista mostraba casi sólo cielo. */
.mitilli-locales-split__media {
	position: sticky;
	top: var(--mitilli-space-6);
}

.mitilli-locales-split__media picture,
.mitilli-locales-split__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: var(--mitilli-radius-lg);
	object-fit: cover;
	object-position: 50% 70%;
}

/* En la portada las tarjetas acompañan a la fachada: una debajo de la otra. */
.mitilli-locales-split__lista .mitilli-branch-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mitilli-space-3);
}

/* I-19: el resumen acompana el scroll, como en las maquetas de carrito y
   checkout. Sin esto, en un pedido largo el total queda fuera de pantalla.
   (Un comentario pegado al selector anterior lo dejaba sin efecto.) */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	position: sticky;
	top: var(--mitilli-space-5);
	align-self: start;
}

/* Nota y bloque de entrega del rail de filtros. */
.mitilli-filter-note {
	padding: var(--mitilli-space-3);
	margin: 0;
	border: 1px solid var(--mitilli-color-border-subtle);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-surface-alt);
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-xs);
	line-height: 1.45;
}

.mitilli-filter-delivery {
	display: grid;
	gap: var(--mitilli-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mitilli-filter-delivery li {
	display: flex;
	align-items: flex-start;
	gap: var(--mitilli-space-2);
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-xs);
	line-height: 1.45;
}

.mitilli-filter-delivery .mitilli-icon {
	margin-top: 0.1rem;
	color: var(--mitilli-color-action);
}

.mitilli-filter-delivery strong {
	color: var(--mitilli-color-text);
	font-weight: var(--mitilli-font-weight-medium);
}

/* I-12: los chips de filtro activo viajan con la grilla, no con el rail. */
.mitilli-active-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mitilli-space-2);
	margin-bottom: var(--mitilli-space-4);
}

.mitilli-branch-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mitilli-space-4);
}

.mitilli-branch-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mitilli-space-5);
}

/*
 * Tarjeta de local: nombre, dirección y los tres datos que se consultan
 * (atención, retiro y teléfono). El bloque decorativo verde con «01 Mitilli
 * Hermanos» ocupaba un tercio de la tarjeta y repetía la marca tres veces.
 */
.mitilli-branch-card {
	display: flex;
	overflow: hidden;
	border: 1px solid var(--mitilli-color-border);
	border-top: 4px solid var(--mitilli-color-action);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-surface-alt);
}

.mitilli-branch-card__body {
	display: flex;
	width: 100%;
	flex-direction: column;
	padding: var(--mitilli-space-5);
}

.mitilli-branch-card .mitilli-eyebrow {
	margin: 0 0 var(--mitilli-space-1);
}

.mitilli-branch-card h3 {
	margin: 0;
	font-size: var(--mitilli-font-size-xl);
}

.mitilli-branch-card__address {
	margin: var(--mitilli-space-1) 0 0;
	color: var(--mitilli-color-text-muted);
}

.mitilli-branch-card__hours {
	display: grid;
	gap: var(--mitilli-space-3);
	margin: var(--mitilli-space-4) 0 0;
	padding-top: var(--mitilli-space-4);
	border-top: 1px solid var(--mitilli-color-border-subtle);
	font-size: var(--mitilli-font-size-sm);
}

.mitilli-branch-card__hours dt {
	color: var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-xs);
	font-weight: var(--mitilli-font-weight-bold);
	letter-spacing: var(--mitilli-letter-spacing-label);
	text-transform: uppercase;
}

.mitilli-branch-card__hours dd {
	margin: 2px 0 0;
	color: var(--mitilli-color-text);
}

.mitilli-branch-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mitilli-space-2);
	margin-top: auto;
	padding-top: var(--mitilli-space-5);
}

.mitilli-button--small {
	display: inline-flex;
	min-height: var(--mitilli-tap-target);
	align-items: center;
	padding: var(--mitilli-space-2) var(--mitilli-space-4);
	font-size: var(--mitilli-font-size-sm);
}

.mitilli-inline-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mitilli-space-4);
	margin-top: var(--mitilli-space-5);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-bold);
}

.mitilli-guide {
	max-width: 58rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mitilli-guide li {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: var(--mitilli-space-5);
	padding: var(--mitilli-space-6) 0;
	border-top: 1px solid var(--mitilli-color-border);
}

.mitilli-guide li > span {
	display: grid;
	width: 3rem;
	height: 3rem;
	place-items: center;
	border-radius: var(--mitilli-radius-pill);
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-on-action);
	font-weight: var(--mitilli-font-weight-bold);
}

.mitilli-guide h2 {
	margin: 0;
	font-size: var(--mitilli-font-size-xl);
}

.mitilli-guide p {
	margin: var(--mitilli-space-2) 0 0;
	color: var(--mitilli-color-text-muted);
}

.mitilli-legal-honeypot {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mitilli-legal-request {
	max-width: 48rem;
}

.mitilli-legal-form {
	display: grid;
	gap: var(--mitilli-space-5);
}

.mitilli-legal-receipt code {
	font-size: var(--mitilli-font-size-lg);
}

/* ---------- Footer and contact ---------- */
.mitilli-site-footer {
	clear: both;
	padding-top: clamp(var(--mitilli-space-12), 7vw, var(--mitilli-space-20));
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-on-action);
}

.mitilli-site-footer__grid {
	display: grid;
	grid-template-columns: minmax(15rem, 1.5fr) repeat(3, minmax(9rem, 1fr));
	gap: clamp(var(--mitilli-space-8), 5vw, var(--mitilli-space-16));
}

.mitilli-brand--footer,
.mitilli-brand--footer:hover {
	color: var(--mitilli-color-on-action);
}

.mitilli-brand--footer .mitilli-brand__logo {
	width: 13rem;
}

/* Con max-height el logo queda más angosto que su caja: «contain» lo centraba
   y en el teléfono aparecía corrido ~30 px respecto del texto del pie. */
.mitilli-brand--footer .mitilli-brand__image {
	object-position: left center;
}

.mitilli-brand--footer .mitilli-brand__wordmark span {
	color: var(--mitilli-color-white);
}

.mitilli-brand--footer .mitilli-brand__descriptor {
	color: var(--mitilli-color-on-action-muted);
}

.mitilli-site-footer__brand p {
	max-width: 30rem;
	color: var(--mitilli-color-on-action-muted);
}

.mitilli-social-link {
	display: inline-flex;
	align-items: center;
	gap: var(--mitilli-space-2);
	min-height: 2.75rem;
	margin-top: var(--mitilli-space-2);
	font-weight: var(--mitilli-font-weight-bold);
	text-underline-offset: 0.22em;
}

.mitilli-social-link span:first-child {
	color: var(--mitilli-color-on-action-muted);
	font-size: var(--mitilli-font-size-xs);
	letter-spacing: var(--mitilli-letter-spacing-label);
	text-transform: uppercase;
}

.mitilli-site-footer h2 {
	margin: 0 0 var(--mitilli-space-4);
	color: var(--mitilli-color-on-action);
	font-size: var(--mitilli-font-size-sm);
	letter-spacing: var(--mitilli-letter-spacing-label);
	text-transform: uppercase;
}

.mitilli-site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mitilli-site-footer li + li {
	margin-top: var(--mitilli-space-3);
}

.mitilli-site-footer a {
	color: var(--mitilli-color-on-action);
}

.mitilli-footer-branches li {
	display: grid;
	gap: var(--mitilli-space-1);
}

.mitilli-footer-branches a {
	color: var(--mitilli-color-on-action-muted);
	font-size: var(--mitilli-font-size-sm);
}

.mitilli-site-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mitilli-space-5);
	padding-block: var(--mitilli-space-8);
	margin-top: var(--mitilli-space-12);
	border-top: 1px solid var(--mitilli-color-text-muted);
	font-size: var(--mitilli-font-size-xs);
}

.mitilli-site-footer__legal p {
	margin: 0;
}

.mitilli-site-footer .mitilli-credit {
	display: inline-flex;
	align-items: center;
	gap: var(--mitilli-space-2);
	color: var(--mitilli-color-on-action-muted);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.mitilli-site-footer .mitilli-credit:hover,
.mitilli-site-footer .mitilli-credit:focus-visible {
	opacity: 1;
}

.mitilli-credit img {
	display: block;
	width: auto;
	height: 1.15em;
}

.mitilli-regret-button {
	display: inline-flex;
	min-height: var(--mitilli-tap-target);
	align-items: center;
	padding: var(--mitilli-space-2) var(--mitilli-space-3);
	border: 1px solid var(--mitilli-color-on-action);
	border-radius: var(--mitilli-radius-sm);
	color: var(--mitilli-color-on-action);
	font-size: var(--mitilli-font-size-xs);
	font-weight: var(--mitilli-font-weight-bold);
	letter-spacing: var(--mitilli-letter-spacing-label);
	text-decoration: none;
}

.mitilli-regret-button:hover {
	background: var(--mitilli-color-on-action);
	color: var(--mitilli-color-action-hover);
}

.mitilli-whatsapp-btn,
.mitilli-whatsapp-btn:visited {
	border-color: var(--mitilli-color-whatsapp);
	background: var(--mitilli-color-whatsapp);
	color: var(--mitilli-color-on-whatsapp);
}

.mitilli-whatsapp-btn:hover {
	border-color: var(--mitilli-color-whatsapp-hover);
	background: var(--mitilli-color-whatsapp-hover);
	color: var(--mitilli-color-on-whatsapp);
}

.mitilli-whatsapp-float {
	position: fixed;
	z-index: 900;
	right: var(--mitilli-space-5);
	bottom: var(--mitilli-space-5);
	display: inline-flex;
	min-height: var(--mitilli-tap-target);
	align-items: center;
	gap: var(--mitilli-space-2);
	padding: var(--mitilli-space-3) var(--mitilli-space-4);
	border-radius: var(--mitilli-radius-pill);
	background: var(--mitilli-color-whatsapp);
	box-shadow: var(--mitilli-shadow-md);
	color: var(--mitilli-color-on-whatsapp);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-bold);
	text-decoration: none;
}

.mitilli-whatsapp-float:hover {
	background: var(--mitilli-color-whatsapp-hover);
	color: var(--mitilli-color-on-whatsapp);
}

.mitilli-drawer-open .mitilli-whatsapp-float,
.mitilli-menu-open .mitilli-whatsapp-float,
.mitilli-filter-open .mitilli-whatsapp-float,
.single-product .mitilli-whatsapp-float {
	display: none;
}

/* ---------- Tablet ---------- */
@media (max-width: 74.99rem) {
	.mitilli-site-header__inner {
		grid-template-columns: auto auto minmax(12rem, 1fr) auto;
	}

	.mitilli-js .mitilli-primary-navigation {
		position: fixed;
		z-index: 9993;
		top: 0;
		left: 0;
		width: min(22rem, 90vw);
		height: 100dvh;
		padding: var(--mitilli-space-5);
		background: var(--mitilli-color-surface);
		box-shadow: var(--mitilli-shadow-lg);
		transform: translateX(-105%);
		transition: transform var(--mitilli-transition);
		visibility: hidden;
	}

	.mitilli-js .mitilli-menu-open .mitilli-primary-navigation {
		transform: translateX(0);
		visibility: visible;
	}

	.mitilli-js .mitilli-primary-navigation ul {
		display: grid;
		gap: 0;
		margin-top: var(--mitilli-space-8);
	}

	.mitilli-js .mitilli-primary-navigation li {
		border-bottom: 1px solid var(--mitilli-color-border);
	}

	.mitilli-js .mitilli-primary-navigation a {
		display: flex;
		min-height: 3.5rem;
		align-items: center;
		font-size: var(--mitilli-font-size-lg);
	}

	.mitilli-js .mitilli-menu-toggle,
	.mitilli-js .mitilli-menu-close {
		display: inline-grid;
	}

	.mitilli-js .mitilli-menu-close {
		margin-left: auto;
		font-size: var(--mitilli-font-size-xl);
	}

	html:not(.mitilli-js) .mitilli-site-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	html:not(.mitilli-js) .mitilli-primary-navigation {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	html:not(.mitilli-js) .mitilli-primary-navigation ul {
		flex-wrap: wrap;
		gap: var(--mitilli-space-2) var(--mitilli-space-5);
	}

	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mitilli-category-grid,
	.mitilli-preparation-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mitilli-story__layout {
		grid-template-columns: 1fr;
	}

	.mitilli-story__copy {
		max-width: var(--mitilli-reading-width);
	}

	.mitilli-site-footer__grid {
		grid-template-columns: 1.5fr repeat(2, 1fr);
	}

	.mitilli-site-footer__brand {
		grid-column: 1 / -1;
	}
}

/* ---------- Mobile and small tablet ---------- */
@media (max-width: 59.99rem) {
	/* El split de "Nuestros locales" no entra en dos columnas en pantallas
	   angostas: a 390 px cada mitad quedaba en ~164 px. */
	.mitilli-locales-split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--mitilli-space-6);
	}

	.mitilli-locales-split__media {
		position: static;
	}

	.mitilli-locales-split__media picture,
	.mitilli-locales-split__media img {
		aspect-ratio: 16 / 9;
	}

	.mitilli-service-strip__inner {
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		white-space: nowrap;
	}

	.mitilli-service-strip__inner::-webkit-scrollbar {
		display: none;
	}

	.mitilli-site-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: var(--mitilli-space-3);
		padding-block: var(--mitilli-space-3);
	}

	.mitilli-site-search {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.mitilli-cart-trigger {
		min-width: auto;
		width: var(--mitilli-tap-target);
		height: var(--mitilli-tap-target);
		justify-content: center;
		padding: 0;
	}

	.mitilli-cart-trigger__copy {
		display: none;
	}

	.mitilli-cart-trigger__count {
		display: flex;
	}

	.mitilli-hero__grid {
		min-height: auto;
		grid-template-columns: 1fr;
		gap: var(--mitilli-space-10);
	}

	.mitilli-hero__copy {
		max-width: 44rem;
	}

	.mitilli-hero__media img {
		aspect-ratio: 4 / 5;
		object-position: 50% 50%;
	}

	.mitilli-page-intro--media {
		grid-template-columns: 1fr;
	}

	.mitilli-home-search {
		margin-top: calc(-1 * var(--mitilli-space-5));
	}

	.mitilli-home-search .mitilli-container {
		grid-template-columns: 1fr;
		gap: var(--mitilli-space-4);
	}

	.mitilli-step-grid,
	.mitilli-branch-grid,
	.mitilli-state-grid,
	.mitilli-fixture-field-grid,
	.mitilli-fixture-choice-grid,
	.mitilli-fixture-quantity-grid,
	.mitilli-fixture-status-grid,
	.mitilli-fixture-placeholder-grid {
		grid-template-columns: 1fr;
	}

	.mitilli-fixture-field-wide {
		grid-column: auto;
	}

	.mitilli-faq__grid {
		grid-template-columns: 1fr;
		gap: var(--mitilli-space-4);
	}

	.mitilli-catalog-tools {
		width: 100%;
		float: none;
		margin: 0 0 var(--mitilli-space-5);
	}

	.mitilli-js .mitilli-filter-toggle {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		background: var(--mitilli-color-surface);
		color: var(--mitilli-color-text);
	}

	.mitilli-js .mitilli-filter-toggle:hover {
		background: var(--mitilli-color-surface-alt);
		color: var(--mitilli-color-text);
	}

	.mitilli-js .mitilli-filter-panel {
		position: fixed;
		z-index: 9995;
		top: 0;
		left: 0;
		width: min(24rem, 92vw);
		height: 100dvh;
		overflow: auto;
		border: 0;
		border-radius: 0;
		box-shadow: var(--mitilli-shadow-lg);
		transform: translateX(-105%);
		transition: transform var(--mitilli-transition);
		visibility: hidden;
	}

	.mitilli-js .mitilli-filter-open .mitilli-filter-panel {
		transform: translateX(0);
		visibility: visible;
	}

	.mitilli-js .mitilli-filter-panel__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--mitilli-space-6);
	}

	.mitilli-js .mitilli-filter-panel__header h2 {
		margin: 0;
	}

	.mitilli-js .mitilli-filter-overlay {
		position: fixed;
		z-index: 9994;
		inset: 0;
		background: var(--mitilli-color-overlay);
	}

	.mitilli-js .mitilli-filter-open .mitilli-filter-overlay:not([hidden]) {
		display: block;
	}

	.woocommerce-shop .products,
	.tax-product_cat .products,
	.woocommerce-shop .woocommerce-pagination,
	.tax-product_cat .woocommerce-pagination {
		width: 100%;
		float: none;
	}

	.single-product .product-above {
		grid-template-columns: 1fr;
	}

	.single-product div.product .summary {
		position: static;
	}

	.mitilli-site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mitilli-site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 39.99rem) {
	.mitilli-service-strip__desktop {
		display: none;
	}

	.mitilli-service-strip__mobile {
		display: inline;
	}

	.mitilli-service-strip__inner {
		justify-content: center;
		font-size: 0.68rem;
		overflow: hidden;
	}

	.mitilli-container,
	.woocommerce-shop #inner-wrap,
	.tax-product_cat #inner-wrap,
	.single-product #inner-wrap,
	.woocommerce-cart #inner-wrap,
	.woocommerce-checkout #inner-wrap,
	.woocommerce-account #inner-wrap,
	.page #inner-wrap {
		width: calc(100% - var(--mitilli-space-4) - var(--mitilli-space-4));
		max-width: var(--mitilli-container);
	}

	.home #inner-wrap {
		width: 100%;
	}

	.mitilli-brand__descriptor {
		display: none;
	}

	.mitilli-brand__wordmark {
		font-size: 1.05rem;
	}

	.mitilli-brand__logo {
		width: 8.75rem;
	}

	.mitilli-brand__image {
		max-height: 3rem;
	}

	.mitilli-hero h1 {
		font-size: clamp(2.45rem, 13vw, 3.5rem);
	}

	.mitilli-hero__actions,
	.mitilli-hero__actions .mitilli-button {
		width: 100%;
	}

	.mitilli-hero__media::before {
		display: none;
	}

	.mitilli-home-search form {
		grid-template-columns: 1fr;
	}

	.mitilli-category-grid,
	.mitilli-preparation-grid,
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mitilli-space-3);
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.wc-block-grid__product-title {
		padding: var(--mitilli-space-4) var(--mitilli-space-3) 0;
		font-size: var(--mitilli-font-size-base);
	}

	.woocommerce ul.products li.product .price,
	.wc-block-grid__product-price {
		padding: var(--mitilli-space-2) var(--mitilli-space-3) 0;
		font-size: var(--mitilli-font-size-base);
	}

	.mitilli-tax-free-price {
		padding-inline: var(--mitilli-space-3);
	}

	.woocommerce ul.products li.product .button {
		width: calc(100% - (2 * var(--mitilli-space-3)));
		margin: auto var(--mitilli-space-3) var(--mitilli-space-3);
		padding-inline: var(--mitilli-space-2);
		font-size: var(--mitilli-font-size-sm);
	}

	.mitilli-section-heading--split {
		display: block;
	}

	.mitilli-section-heading--split > a {
		display: inline-block;
		margin-top: var(--mitilli-space-4);
	}

	.mitilli-brand-gallery__controls {
		margin-top: var(--mitilli-space-5);
	}

	.mitilli-brand-gallery__track {
		grid-auto-columns: 78vw;
	}

	.mitilli-brand-gallery__item:last-child {
		grid-column: span 1;
	}

	.mitilli-brand-gallery__image {
		min-height: 23rem;
		max-height: 29rem;
	}

	.mitilli-story__mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mitilli-preparation-grid {
		grid-template-columns: 1fr;
	}

	.single-product div.product form.cart {
		grid-template-columns: 1fr;
	}

	.mitilli-mobile-buy {
		position: fixed;
		z-index: 880;
		bottom: 0;
		left: 0;
		display: grid;
		width: 100%;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--mitilli-space-3);
		padding: var(--mitilli-space-3) max(var(--mitilli-space-4), env(safe-area-inset-right)) max(var(--mitilli-space-3), env(safe-area-inset-bottom)) max(var(--mitilli-space-4), env(safe-area-inset-left));
		border-top: 1px solid var(--mitilli-color-border);
		background: var(--mitilli-color-surface);
		box-shadow: var(--mitilli-shadow-lg);
		transition: transform var(--mitilli-transition);
	}

	.mitilli-mobile-buy.is-primary-visible {
		transform: translateY(110%);
	}

	.mitilli-mobile-buy > div {
		display: grid;
		line-height: 1.2;
	}

	.mitilli-mobile-buy .price {
		font-weight: var(--mitilli-font-weight-bold);
	}

	.mitilli-mobile-buy small {
		color: var(--mitilli-color-text-muted);
	}

	.single-product .mitilli-site-footer {
		padding-bottom: 5.5rem;
	}

	.mitilli-cart-drawer {
		top: auto;
		bottom: 0;
		width: 100%;
		height: min(88dvh, 46rem);
		border-radius: var(--mitilli-radius-lg) var(--mitilli-radius-lg) 0 0;
		transform: translateY(105%);
	}

	.mitilli-cart-drawer.is-active {
		transform: translateY(0);
	}

	.mitilli-site-footer__grid {
		grid-template-columns: 1fr;
	}

	.mitilli-site-footer__brand {
		grid-column: auto;
	}

	.mitilli-site-footer__legal {
		align-items: flex-start;
		flex-direction: column;
	}

	.mitilli-state-grid {
		grid-template-columns: 1fr;
	}

	.mitilli-whatsapp-text {
		display: none;
	}

	.mitilli-whatsapp-float {
		width: var(--mitilli-tap-target);
		height: var(--mitilli-tap-target);
		justify-content: center;
		padding: 0;
	}
}

/* ---------- Large-screen commerce rhythm ---------- */
@media (min-width: 60rem) {
	.woocommerce-shop #inner-wrap,
	.tax-product_cat #inner-wrap,
	.single-product #inner-wrap {
		padding-top: var(--mitilli-space-8);
	}

	.woocommerce-shop #primary,
	.tax-product_cat #primary,
	.single-product #primary {
		margin-top: var(--mitilli-space-8);
	}

	.product-archive-hero-section .entry-hero-container-inner .entry-header {
		padding-block: var(--mitilli-space-6) var(--mitilli-space-4);
	}
}

/* ---------- Compact product cards for narrow phones ---------- */
@media (max-width: 29.99rem) {
	/*
	 * Dos columnas en lugar de la tarjeta horizontal de una columna.
	 * A 390 px entran 4 productos por pantalla en vez de 3 y la foto pasa de
	 * 7,5rem (120 px) a ~10,8rem (173 px): mas densidad y mas foto a la vez.
	 * En una tienda de comida la fotografia es el argumento de venta.
	 */
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mitilli-space-3);
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		padding: var(--mitilli-space-3) var(--mitilli-space-3) 0;
		font-size: 0.9375rem;
	}

	.woocommerce ul.products li.product .price {
		padding: var(--mitilli-space-2) var(--mitilli-space-3) 0;
		font-size: 1.25rem;
	}

	.mitilli-unidad-venta {
		font-size: 0.75rem;
	}

	.woocommerce ul.products li.product .mitilli-tax-free-price {
		padding-inline: var(--mitilli-space-3);
		font-size: 0.66rem;
	}

	/*
	 * La accion pasa a bloque: a ~173 px de ancho de tarjeta no entran la
	 * politica de venta y el boton en la misma fila. Se repite el anclaje a
	 * .product-action-wrap para ganarle a la regla de escritorio.
	 */
	.woocommerce ul.products.woo-archive-action-on-hover li.product .product-details .product-action-wrap,
	.woocommerce ul.products li.product .product-details .product-action-wrap,
	.woocommerce ul.products li.product .product-action-wrap {
		display: block;
		padding: var(--mitilli-space-3);
	}

	.woocommerce ul.products li.product .mitilli-loop-policy {
		display: block;
		margin-bottom: var(--mitilli-space-2);
	}

	.woocommerce ul.products.woo-archive-action-on-hover li.product .product-details .product-action-wrap .button,
	.woocommerce ul.products li.product .product-action-wrap .button,
	.woocommerce ul.products li.product .button {
		display: flex;
		width: 100%;
		min-height: var(--mitilli-tap-target);
		margin: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		scroll-behavior: auto;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
	}
}

/* ---------- Purchase layout refinements ---------- */
.mitilli-catalog-action {
	width: 100%;
}

.woocommerce ul.products li.product .mitilli-catalog-action.is-in-cart > a {
	display: none !important;
}

.mitilli-catalog-quantity[hidden] {
	display: none;
}

.mitilli-catalog-quantity__label {
	display: block;
	margin-bottom: var(--mitilli-space-1);
	font-size: var(--mitilli-font-size-xs);
	color: var(--mitilli-color-text-muted);
}

.mitilli-catalog-quantity .mitilli-qty-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0;
	width: 100%;
	margin: 0;
}

.mitilli-catalog-quantity .mitilli-qty-btn {
	flex: 0 0 2.75rem;
	width: 2.75rem;
	height: 2.75rem;
	min-height: 2.75rem;
}

.mitilli-catalog-quantity .mitilli-qty-value {
	font-size: var(--mitilli-font-size-sm);
	white-space: nowrap;
}

.mitilli-quantity-error {
	color: var(--mitilli-color-error);
	font-size: var(--mitilli-font-size-xs);
}

.mitilli-cart-delivery-guidance {
	margin-bottom: var(--mitilli-space-6);
	padding: var(--mitilli-space-4);
	background: var(--mitilli-color-surface-alt);
	border-radius: var(--mitilli-radius-sm);
	font-size: var(--mitilli-font-size-sm);
}

.mitilli-cart-delivery-guidance p {
	margin: var(--mitilli-space-1) 0;
}

.mitilli-cart-delivery-guidance:has(+ .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block) {
	display: none;
}

body.mitilli-storefront:not(.home) #inner-wrap .site-container,
body.mitilli-storefront:not(.home) #inner-wrap .content-container {
	padding-inline: 0;
}

.mitilli-empty-catalog {
	max-width: 38rem;
	padding-block: var(--mitilli-space-8) var(--mitilli-space-12);
}

.mitilli-empty-catalog h2 {
	font-size: var(--mitilli-font-size-2xl);
}

.mitilli-empty-catalog .mitilli-text-link {
	display: inline-block;
	margin: var(--mitilli-space-4);
}

body.search .page-title {
	font-size: clamp(1.5rem, 4.5vw, 2rem);
	overflow-wrap: anywhere;
}

body.woocommerce-checkout h1.entry-title {
	font-size: var(--mitilli-font-size-2xl);
	line-height: 1.15;
}

body.woocommerce-checkout .entry-header {
	margin-bottom: var(--mitilli-space-6);
}

.wc-block-components-checkout-step__heading {
	margin-bottom: var(--mitilli-space-4);
}

.wc-block-components-checkout-step__title {
	font-family: var(--mitilli-font-body);
	font-size: var(--mitilli-font-size-lg);
}

@media (min-width: 75rem) {
	.mitilli-category-grid {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); /* Ocupa el ancho con las categorías que tengan productos. */
		gap: var(--mitilli-space-4);
	}

	.mitilli-category-card img {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.mitilli-category-card__bar {
		padding: var(--mitilli-space-4);
		font-size: var(--mitilli-font-size-base);
	}
}

@media (max-width: 59.99rem) {
	body.mitilli-storefront ul.products li.product .product-details {
		width: 100%;
		margin: 0;
		padding: var(--mitilli-space-3) var(--mitilli-space-2);
	}

	body.mitilli-storefront ul.products.woo-archive-action-on-hover li.product .product-details .product-action-wrap,
	body.mitilli-storefront ul.products li.product .product-action-wrap {
		padding: 0;
	}

	body.mitilli-storefront ul.products li.product .product-action-wrap .button {
		width: 100%;
		white-space: normal;
		line-height: 1.3;
	}

	body.woocommerce-shop #inner-wrap,
	body.tax-product_cat #inner-wrap,
	body.single-product #inner-wrap,
	body.search #inner-wrap {
		padding-top: var(--mitilli-space-4);
	}

	body.woocommerce-shop #primary,
	body.tax-product_cat #primary,
	body.single-product #primary,
	body.search #primary {
		margin-top: var(--mitilli-space-4);
	}

	.product-archive-hero-section .entry-hero-container-inner .entry-header {
		padding-block: var(--mitilli-space-3) var(--mitilli-space-2);
	}

	.woocommerce-shop .mitilli-catalog-tools,
	.tax-product_cat .mitilli-catalog-tools {
		margin-bottom: var(--mitilli-space-3);
	}

	.woocommerce .kadence-shop-top-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--mitilli-space-2);
		margin-bottom: var(--mitilli-space-4);
		padding-bottom: 0;
	}

	.woocommerce .kadence-shop-top-item {
		margin: 0;
		width: auto;
	}

	body.woocommerce .kadence-shop-top-row .woocommerce-result-count {
		margin: 0;
		font-size: var(--mitilli-font-size-xs);
		line-height: 1.4;
	}

	.woocommerce .woocommerce-ordering {
		margin: 0;
	}

	.woocommerce .woocommerce-ordering select {
		max-width: 11rem;
		font-size: var(--mitilli-font-size-sm);
	}

	.mitilli-hero__grid { gap: 0; }
	.mitilli-hero__copy { padding: var(--mitilli-space-8) var(--mitilli-space-4); }
	.mitilli-hero__media { height: 13rem; }
	.mitilli-hero__media img { object-position: 50% 55%; }
	.mitilli-hero h1 { font-size: clamp(2.25rem, 8.7vw, 3.5rem); }
	.mitilli-hero__copy > p:not(.mitilli-eyebrow) { margin-top: var(--mitilli-space-4); font-size: var(--mitilli-font-size-base); }
	.mitilli-hero__actions { width: auto; margin-top: var(--mitilli-space-5); }
	.mitilli-hero__actions .mitilli-button { width: auto; min-height: var(--mitilli-control-height); padding-inline: var(--mitilli-space-4); font-size: var(--mitilli-font-size-base); }
	.mitilli-category-card img { height: auto; aspect-ratio: 4 / 3; }
	.mitilli-category-card__bar { padding: var(--mitilli-space-3); font-size: var(--mitilli-font-size-base); }
	.mitilli-section-heading--split > a { margin-top: var(--mitilli-space-2); }

	.single-product .product-above { gap: var(--mitilli-space-4); }
	.single-product .woocommerce-product-gallery { margin-bottom: 0; }
	/* La foto (cuadrada) llena el recuadro: con 13rem y «contain» quedaban dos franjas beige a los costados. */
	.single-product.woocommerce div.product div.images img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
	.single-product .product_title { font-size: 2rem; margin-bottom: var(--mitilli-space-2); }
	.single-product .woocommerce-product-details__short-description p { margin-bottom: var(--mitilli-space-3); }
	.single-product div.product form.cart { position: static; padding: var(--mitilli-space-4); margin-block: var(--mitilli-space-4); }
	.single-product div.product form.cart > .price { font-size: 2rem; }
	.single-product .mitilli-subtotal-estimado { margin-bottom: var(--mitilli-space-2); }
	.mitilli-mobile-buy strong { font-size: var(--mitilli-font-size-lg); font-variant-numeric: tabular-nums; }
	.mitilli-preparation-guide .mitilli-preparation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mitilli-space-4); }
	.mitilli-preparation-grid article { padding: var(--mitilli-space-4); }
	.mitilli-preparation-grid article h3 { font-size: var(--mitilli-font-size-base); }
	.mitilli-preparation-grid article p { font-size: var(--mitilli-font-size-sm); }
	.woocommerce ul.products li.product .mitilli-tax-free-price { font-size: 0.6875rem; line-height: 1.45; }
}

/* The checkout badge assumes whole items. Quantity with its sale unit is supplied by item metadata. */
body.mitilli-storefront .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	display: none;
}

@media print {
	.mitilli-service-strip,
	.mitilli-site-header,
	.mitilli-site-footer,
	.mitilli-whatsapp-float,
	.mitilli-mobile-buy,
	.mitilli-cart-drawer,
	.mitilli-drawer-overlay {
		display: none;
	}

	body.mitilli-storefront {
		background: var(--mitilli-color-white);
		color: var(--mitilli-color-text);
	}
}

/* =============================================================
   Tarjeta de producto — consolidación (auditoría 2026-09-23)
   -------------------------------------------------------------
   Se sumaban tres rellenos (Kadence en .product-details, cada hijo y
   la acción) que en escritorio dejaban el texto a 45 px del borde y en
   móvil desalineaban «Desde 0,5 kg» del título. Además la acción de
   carrito ocupaba el 100 % de la fila y aplastaba «Desde 1 kg» debajo
   del botón. Un solo relleno horizontal para todo el cuerpo.
   Selectores largos a propósito: Kadence llega a 6 clases (gotcha 5).
   ============================================================= */
body.mitilli-storefront {
	--mitilli-card-pad: var(--mitilli-space-5);
}

body.mitilli-storefront ul.products.woo-archive-action-on-hover li.product .product-details,
body.mitilli-storefront ul.products li.product .product-details {
	width: 100%;
	/* Kadence le pone height: 100 % dentro de una tarjeta que también mide
	   100 %: en «Productos relacionados» el cuerpo desbordaba, la flexbox
	   encogía la foto (164 → 110 px) y quedaba un hueco sobre «Desde 0,5 kg». */
	height: auto;
	flex: 1 0 auto;
	margin: 0;
	padding: 0 0 var(--mitilli-card-pad);
}

body.mitilli-storefront ul.products li.product > .woocommerce-loop-image-link {
	flex-shrink: 0;
}

body.mitilli-storefront ul.products li.product .product-details .woocommerce-loop-product__title,
body.mitilli-storefront ul.products li.product .product-details .price,
body.mitilli-storefront ul.products li.product .product-details .mitilli-tax-free-price {
	padding-inline: var(--mitilli-card-pad);
}

body.mitilli-storefront ul.products li.product .product-details .woocommerce-loop-product__title {
	padding-top: var(--mitilli-space-4);
}

body.mitilli-storefront ul.products.woo-archive-action-on-hover li.product .product-details .product-action-wrap,
body.mitilli-storefront ul.products li.product .product-details .product-action-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mitilli-space-2) var(--mitilli-space-3);
	margin-top: auto;
	padding: var(--mitilli-space-4) var(--mitilli-card-pad) 0;
}

body.mitilli-storefront ul.products li.product .product-action-wrap .mitilli-loop-policy {
	display: block;
	flex: 1 0 auto;
	margin: 0;
}

body.mitilli-storefront ul.products li.product .product-action-wrap .mitilli-catalog-action {
	width: auto;
	margin-left: auto;
}

body.mitilli-storefront ul.products.woo-archive-action-on-hover li.product .product-details .product-action-wrap .button,
body.mitilli-storefront ul.products li.product .product-action-wrap .button {
	margin: 0;
}

body.mitilli-storefront ul.products.woo-archive-action-on-hover li.product .product-details .product-action-wrap > .button {
	margin-left: auto;
}

/* Tarjetas angostas (dos columnas en el teléfono): política arriba, botón a lo ancho. */
@media (max-width: 47.99rem) {
	body.mitilli-storefront {
		--mitilli-card-pad: var(--mitilli-space-3);
	}

	body.mitilli-storefront ul.products.woo-archive-action-on-hover li.product .product-details .product-action-wrap,
	body.mitilli-storefront ul.products li.product .product-details .product-action-wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch; /* space-between heredado encogía la única columna. */
		gap: var(--mitilli-space-2);
	}

	body.mitilli-storefront ul.products li.product .product-action-wrap .mitilli-catalog-action {
		width: 100%;
		margin: 0;
	}

	body.mitilli-storefront ul.products.woo-archive-action-on-hover li.product .product-details .product-action-wrap .button,
	body.mitilli-storefront ul.products li.product .product-action-wrap .button {
		width: 100%;
	}
}

/* Página 404 propia (la de Kadence salía en inglés). */
.mitilli-not-found__search {
	display: flex;
	gap: var(--mitilli-space-2);
	max-width: 36rem;
	margin-top: var(--mitilli-space-6);
}

.mitilli-not-found__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--mitilli-control-height);
	padding-inline: var(--mitilli-space-4);
	border: 1px solid var(--mitilli-color-border-strong);
	border-radius: var(--mitilli-radius-md);
	background: var(--mitilli-color-white);
}

.mitilli-not-found__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mitilli-space-3);
	margin-top: var(--mitilli-space-6);
}

/* Menú desplegable: categorías y contacto (sólo teléfono y tablet). */
.mitilli-menu-extra {
	display: none;
}

@media (max-width: 74.99rem) {
	.mitilli-js .mitilli-primary-navigation {
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.mitilli-js .mitilli-menu-extra {
		display: block;
		margin-top: var(--mitilli-space-6);
	}

	.mitilli-js .mitilli-primary-navigation .mitilli-menu-categories {
		display: grid;
		gap: var(--mitilli-space-3);
		margin: var(--mitilli-space-3) 0 0;
	}

	.mitilli-js .mitilli-primary-navigation .mitilli-menu-categories li {
		border: 0;
	}

	.mitilli-js .mitilli-primary-navigation .mitilli-menu-categories a {
		display: inline-flex;
		min-height: var(--mitilli-tap-target);
		font-size: var(--mitilli-font-size-base);
		font-weight: var(--mitilli-font-weight-bold);
	}

	.mitilli-js .mitilli-primary-navigation .mitilli-menu-categories__sub {
		display: flex;
		flex-wrap: wrap;
		gap: var(--mitilli-space-1) var(--mitilli-space-4);
	}

	.mitilli-js .mitilli-primary-navigation .mitilli-menu-categories__sub a {
		min-height: 2.25rem;
		color: var(--mitilli-color-text-muted);
		font-size: var(--mitilli-font-size-sm);
		font-weight: var(--mitilli-font-weight-medium);
	}

	.mitilli-js .mitilli-primary-navigation .mitilli-menu-extra__contact {
		display: flex;
		justify-content: center;
		width: 100%;
		min-height: var(--mitilli-control-height);
		margin-top: var(--mitilli-space-6);
		font-size: var(--mitilli-font-size-base);
	}
}

/* Redes del pie: Instagram y Facebook uno debajo del otro. */
.mitilli-social-links {
	display: grid;
	justify-items: start;
	gap: 0;
	margin-top: var(--mitilli-space-2);
}

.mitilli-social-links .mitilli-social-link {
	margin-top: 0;
}

/*
 * Acento manuscrito (Kalam, alternativa libre a Segoe Print). Se usa poco y
 * en frases cortas, como una nota a mano sobre el mostrador: la bajada del
 * hero y los pies de foto de la historia y la galería.
 */
.mitilli-hero .mitilli-eyebrow {
	font-family: var(--mitilli-font-accent);
	font-size: var(--mitilli-font-size-lg);
	font-weight: var(--mitilli-font-weight-normal);
	letter-spacing: 0;
	text-transform: none;
}

.mitilli-story__item figcaption,
.mitilli-brand-gallery__item figcaption {
	font-family: var(--mitilli-font-accent);
	font-size: var(--mitilli-font-size-base);
	font-weight: var(--mitilli-font-weight-normal);
}

/* La 404 no pasa por el contenedor de Kadence: margen propio en escritorio. */
.mitilli-not-found {
	padding-block: var(--mitilli-section-space);
}

/* «← Volver a Vacuno» arriba de la ficha (assets/js/volver.js). */
.mitilli-volver {
	margin: 0 0 var(--mitilli-space-3);
}

.mitilli-volver a {
	display: inline-flex;
	min-height: var(--mitilli-tap-target);
	align-items: center;
	gap: var(--mitilli-space-1);
	padding: 0 var(--mitilli-space-3) 0 var(--mitilli-space-2);
	margin-left: calc(-1 * var(--mitilli-space-2));
	border-radius: var(--mitilli-radius-md);
	color: var(--mitilli-color-action);
	font-size: var(--mitilli-font-size-sm);
	font-weight: var(--mitilli-font-weight-bold);
	text-decoration: none;
}

.mitilli-volver a:hover,
.mitilli-volver a:focus-visible {
	background: var(--mitilli-color-surface-alt);
	color: var(--mitilli-color-action-hover);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mitilli-volver svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.2;
}

/* =============================================================
   Portada en el teléfono — revisión 2026-09-28
   ============================================================= */

/* Flechas de la galería: contorno en lugar de relleno. Deshabilitada, la
   verde al 55 % quedaba como un botón gris sucio. */
.mitilli-brand-gallery__controls button {
	border: 1px solid var(--mitilli-color-action);
	background: var(--mitilli-color-white);
	color: var(--mitilli-color-action);
}

.mitilli-brand-gallery__controls button:hover:not(:disabled) {
	background: var(--mitilli-color-action);
	color: var(--mitilli-color-on-action);
}

.mitilli-brand-gallery__controls button:disabled {
	opacity: 0.35;
}

@media (max-width: 59.99rem) {
	/* El logo quedaba pegado a la hamburguesa: centrado entre los dos botones
	   (miden lo mismo, así que el centro de la columna es el de la pantalla). */
	.mitilli-site-header__inner > .mitilli-brand {
		justify-self: center;
		align-items: center;
	}
}

@media (max-width: 39.99rem) {
	/* «Dentro de Carnes»: el rótulo arriba y los tres chips en una fila pareja;
	   antes entraban dos y el tercero caía solo al renglón siguiente. */
	.mitilli-category-subnav {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mitilli-category-subnav__label {
		grid-column: 1 / -1;
		margin: 0;
	}

	.mitilli-category-subnav .mitilli-chip {
		justify-content: center;
		height: auto;
		min-height: var(--mitilli-tap-target);
	}

	/* «El oficio se ve en cada pedido»: la primera foto a todo el ancho y las
	   otras dos lado a lado, en vez de dos arriba y una suelta abajo. La
	   proporción va en la imagen (height: 100 % dentro de una fila «auto» no
	   tiene altura de referencia y en Safari la foto tapaba el pie). */
	.mitilli-story__mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mitilli-space-5) var(--mitilli-space-3);
	}

	.mitilli-story__item {
		display: block;
	}

	.mitilli-story__item--1 {
		grid-column: 1 / -1;
	}

	.mitilli-story__item img {
		display: block;
		height: auto;
		aspect-ratio: 4 / 5;
		border-radius: var(--mitilli-radius-md);
	}

	.mitilli-story__item--1 img {
		aspect-ratio: 4 / 3;
	}

	/* Pie en crema pleno: en el crema atenuado sobre verde no se leía. */
	.mitilli-section--brand .mitilli-story__item figcaption {
		padding: var(--mitilli-space-2) 0 0;
		color: var(--mitilli-color-on-action);
		line-height: 1.35;
	}

	/* Galería: las flechas pasan debajo de las fotos, centradas junto a la
	   barra de avance, en lugar de quedar sueltas a la izquierda entre el
	   texto y las fotos. */
	.mitilli-brand-gallery > .mitilli-container {
		display: flex;
		flex-direction: column;
	}

	.mitilli-brand-gallery .mitilli-section-heading {
		display: contents;
	}

	.mitilli-brand-gallery .mitilli-section-heading > div:first-child {
		margin-bottom: var(--mitilli-space-6);
	}

	.mitilli-brand-gallery__track {
		order: 1;
	}

	.mitilli-brand-gallery__controls {
		order: 2;
		align-self: center;
		gap: var(--mitilli-space-3);
		margin-top: var(--mitilli-space-3);
	}
}

/* Preguntas frecuentes: el triángulo nativo quedaba a la izquierda y la
   segunda línea de una pregunta larga arrancaba debajo de él. Chevron a la
   derecha, en el espacio que ya reservaba el relleno del summary. */
.mitilli-faq summary {
	position: relative;
	list-style: none;
}

.mitilli-faq summary::-webkit-details-marker {
	display: none;
}

.mitilli-faq summary::after {
	position: absolute;
	top: 50%;
	right: var(--mitilli-space-2);
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	content: "";
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--mitilli-transition);
}

.mitilli-faq details[open] summary::after {
	transform: translateY(-25%) rotate(-135deg);
}