/* Criollo Landing por Molido v1.2.0 — estilo alineado con la tienda (Cafés del Mundo)
   NOTA WP ROCKET: añadir al safelist de Used CSS todos los selectores .criollo-lm-*
   (criollo-lm-grid, criollo-lm-card, criollo-lm-thumb, criollo-lm-title,
   criollo-lm-price-bar, criollo-lm-price-range, criollo-lm-price-active,
   criollo-lm-pesos, criollo-lm-peso, criollo-lm-add, criollo-lm-soldout,
   criollo-lm-empty, is-active, is-out, is-loading, is-added) + purgar Used CSS.

   Usa las variables del tema GeneratePress child cuando existen, con fallback. */

.criollo-lm-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 24px 0 40px;
}

.criollo-lm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.criollo-lm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.criollo-lm-grid,
	.criollo-lm-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}



/* --- Tarjeta: borde fino, sin sombra, como la tienda --- */
.criollo-lm-card {
	display: flex;
	flex-direction: column;
	background: var(--white, #fff);
	border: 1px solid #e3ddd0;
	border-radius: 4px;
	overflow: hidden;
	text-align: center;
}

.criollo-lm-thumb {
	display: block;
	position: relative;
	padding: 18px 18px 8px;
	background: var(--white, #fff);
}

.criollo-lm-thumb img { width: 100%; height: auto; }

/* --- Título: mayúsculas, verde, centrado --- */
.criollo-lm-title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin: 6px 0 0;
	padding: 10px 14px;
	line-height: 1.3;
	/* Reserva 2 líneas para que las barras de precio queden alineadas
	   entre tarjetas de la misma fila. Los títulos más largos crecen. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(2 * 1.3em + 20px);
}

.criollo-lm-title a {
	text-decoration: none;
	color: var(--green, #5a806e);
}

/* --- Barra de precio marrón oscuro a todo el ancho --- */
.criollo-lm-price-bar {
	background: var(--contrast-2, #4d3128);
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	padding: 10px 14px;
	line-height: 1.2;
}

.criollo-lm-price-bar .amount,
.criollo-lm-price-bar bdi { color: #fff; }
.criollo-lm-price-bar del { opacity: .6; font-weight: 400; margin-right: 6px; }
.criollo-lm-price-bar ins { text-decoration: none; }

/* --- Botones de peso: cuadrados con borde, como la tienda --- */
.criollo-lm-pesos {
	display: flex;
	justify-content: center;
	gap: 10px;
	padding: 16px 14px 6px;
}

.criollo-lm-peso {
	min-width: 58px;
	border: 1.5px solid #cfc6b8;
	background: var(--white, #fff);
	color: var(--contrast, #090707);
	border-radius: 4px;
	padding: 8px 14px;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: all .15s ease;
}

.criollo-lm-peso:hover { border-color: var(--contrast-2, #4d3128); }

.criollo-lm-peso.is-active {
	border-color: var(--contrast-2, #4d3128);
	background: var(--contrast-2, #4d3128);
	color: #fff;
}

.criollo-lm-peso.is-out {
	opacity: .4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* --- Botón añadir: mayúsculas, ancho completo, marrón oscuro --- */
.criollo-lm-add {
	margin-top: auto;
	width: 100%;
	cursor: pointer;
	border: 0;
	background: var(--contrast-2, #4d3128);
	color: #fff;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	font-size: .9rem;
	padding: 14px 16px;
	transition: background .15s ease;
}

.criollo-lm-add:hover { background: #3a251d; }
.criollo-lm-add.is-loading { opacity: .7; pointer-events: none; }
.criollo-lm-add.is-added { background: var(--green, #5a806e) !important; color: #fff; }

.criollo-lm-soldout {
	margin-top: auto;
	display: block;
	padding: 14px;
	background: #ece7dd;
	color: #8a8275;
	font-weight: 700;
	text-transform: uppercase;
	font-size: .85rem;
}

.criollo-lm-empty { text-align: center; padding: 30px 0; }

/* Móvil: se mantienen 2 columnas (antes bajaba a 1). Se compactan paddings
   y tipografías para que la tarjeta quepa sin romperse en pantallas estrechas. */
@media (max-width: 520px) {
	.criollo-lm-grid,
	.criollo-lm-cols-2,
	.criollo-lm-cols-3,
	.criollo-lm-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

	.criollo-lm-thumb { padding: 10px 10px 4px; }

	.criollo-lm-title {
		font-size: .82rem;
		padding: 8px 6px;
		letter-spacing: 0;
		word-break: break-word;
		hyphens: auto;
		min-height: calc(3 * 1.3em + 16px);
	}

	.criollo-lm-price-bar {
		font-size: .85rem;
		padding: 8px 6px;
	}

	.criollo-lm-pesos {
		gap: 6px;
		padding: 10px 6px 4px;
	}

	.criollo-lm-peso {
		min-width: 0;
		flex: 1 1 0;
		padding: 7px 4px;
		font-size: .78rem;
		white-space: nowrap;
	}

	.criollo-lm-add {
		font-size: .68rem;
		padding: 12px 2px;
		letter-spacing: 0;
	}

	.criollo-lm-soldout {
		font-size: .75rem;
		padding: 12px 6px;
	}
}

/* ============================================================
   Modal superautomática (landing) — replica el aviso de ficha.
   Selectores a safelistar en WP Rocket Used CSS:
   .criollo-lm-modal, .criollo-lm-modal-content, .criollo-lm-modal-close,
   .criollo-lm-modal-icon, .criollo-lm-modal-title, .criollo-lm-modal-options,
   .criollo-lm-modal-option, .criollo-lm-modal-option-icon,
   .criollo-lm-modal-option-text, .criollo-lm-modal-option-label,
   .criollo-lm-modal-option-desc, .criollo-lm-modal-open
   ============================================================ */

.criollo-lm-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .55);
	padding: 20px;
}

body.criollo-lm-modal-open { overflow: hidden; }

.criollo-lm-modal-content {
	position: relative;
	background: var(--white, #fff);
	border-radius: 16px;
	max-width: 420px;
	width: 100%;
	padding: 32px 28px 28px;
	text-align: center;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
	max-height: 90vh;
	overflow-y: auto;
}

.criollo-lm-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: 0;
	font-size: 1.6rem;
	line-height: 1;
	color: #999;
	cursor: pointer;
	padding: 4px 8px;
}

.criollo-lm-modal-close:hover { color: var(--contrast, #090707); }

.criollo-lm-modal-icon {
	font-size: 2.4rem;
	line-height: 1;
	margin-bottom: 14px;
}

.criollo-lm-modal-title {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--contrast, #090707);
	margin-bottom: 22px;
}

.criollo-lm-modal-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.criollo-lm-modal-option {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: left;
	background: #f6f5f3;
	border: 1.5px solid transparent;
	border-radius: 12px;
	padding: 14px 16px;
	cursor: pointer;
	transition: all .15s ease;
}

.criollo-lm-modal-option:hover,
.criollo-lm-modal-option:focus-visible {
	border-color: var(--contrast-2, #4d3128);
	background: #f0ede9;
	outline: none;
}

.criollo-lm-modal-option-icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white, #fff);
	border-radius: 10px;
	font-size: 1.3rem;
}

.criollo-lm-modal-option-text { display: flex; flex-direction: column; }

.criollo-lm-modal-option-label {
	font-weight: 700;
	font-size: .98rem;
	color: var(--contrast, #090707);
	line-height: 1.3;
}

.criollo-lm-modal-option-desc {
	font-size: .82rem;
	color: #6b6259;
	line-height: 1.35;
	margin-top: 2px;
}

@media (max-width: 520px) {
	.criollo-lm-modal-content { padding: 26px 18px 20px; border-radius: 12px; }
	.criollo-lm-modal-title { font-size: 1rem; margin-bottom: 18px; }
	.criollo-lm-modal-option { padding: 12px; gap: 10px; }
	.criollo-lm-modal-option-icon { width: 36px; height: 36px; font-size: 1.1rem; }
	.criollo-lm-modal-option-label { font-size: .9rem; }
	.criollo-lm-modal-option-desc { font-size: .76rem; }
}

/* Blindaje contra los estilos globales de <button> del tema (GeneratePress).
   El tema aplica button:hover / button:focus con var(--contrast-3) (#5A806E),
   que teñía la opción de verde y dejaba el texto ilegible. Se sube la
   especificidad con el ID del modal para ganar sin recurrir a !important. */

#criolloLmModal .criollo-lm-modal-option,
#criolloLmModal .criollo-lm-modal-option:hover,
#criolloLmModal .criollo-lm-modal-option:focus,
#criolloLmModal .criollo-lm-modal-option:focus-visible,
#criolloLmModal .criollo-lm-modal-option:active {
	background: #f6f5f3;
	color: var(--contrast, #090707);
	box-shadow: none;
	text-decoration: none;
}

#criolloLmModal .criollo-lm-modal-option:hover,
#criolloLmModal .criollo-lm-modal-option:focus-visible {
	background: #efece7;
	border-color: var(--contrast-2, #4d3128);
}

/* El foco no debe pintar el botón: solo un contorno discreto. */
#criolloLmModal .criollo-lm-modal-option:focus { outline: none; }
#criolloLmModal .criollo-lm-modal-option:focus-visible {
	outline: 2px solid var(--contrast-2, #4d3128);
	outline-offset: 2px;
}

/* Los textos internos nunca heredan el color de estado del tema. */
#criolloLmModal .criollo-lm-modal-option .criollo-lm-modal-option-label { color: var(--contrast, #090707); }
#criolloLmModal .criollo-lm-modal-option .criollo-lm-modal-option-desc { color: #6b6259; }

#criolloLmModal .criollo-lm-modal-option-icon {
	background: var(--white, #fff);
	color: inherit;
}

#criolloLmModal .criollo-lm-modal-close,
#criolloLmModal .criollo-lm-modal-close:hover,
#criolloLmModal .criollo-lm-modal-close:focus {
	background: none;
	box-shadow: none;
}

#criolloLmModal .criollo-lm-modal-content:focus { outline: none; }