/**
 * Configurador de la suscripción Optimilk.
 *
 * Tokens del handoff de diseño como variables. Las tipografías heredan las del
 * tema salvo que se sobrescriban las variables --optimilk-font-* (por ejemplo
 * desde el CSS personalizado de la página en Elementor).
 */

.optimilk-steps,
.optimilk-summary,
.optimilk-builder {
	--optimilk-accent: #d32e22;
	--optimilk-accent-hover: #a8231a;
	--optimilk-ink: #2b211b;
	--optimilk-ink-2: #4a3b32;
	--optimilk-muted: #7a685a;
	--optimilk-muted-2: #8a7767;
	--optimilk-disabled-text: #9c8b7c;
	--optimilk-disabled-bg: #efe2d2;
	--optimilk-card: #fff9f1;
	--optimilk-card-inactive: #fffdf9;
	--optimilk-card-active: #ffffff;
	--optimilk-border: #eadccb;
	--optimilk-border-inactive: #efe2d2;
	--optimilk-border-dashed: #e2d2bf;
	--optimilk-divider: #f0e5d8;
	--optimilk-dot-border: #cdbba9;
	--optimilk-remove: #b9a796;
	/* Color de la tarjeta. La plantilla lo sustituye por el del producto, aclarado. */
	--optimilk-card-bg: var(--optimilk-card-inactive);
	--optimilk-font-display: inherit;
	--optimilk-font-ui: inherit;
	--optimilk-font-body: inherit;
	--optimilk-control-width: 128px;
	/* Columnas del resumen: cajas | producto | importe | quitar. Las comparten la
	   cabecera y cada línea, que son rejillas distintas y deben cuadrar. */
	--optimilk-summary-grid: 44px minmax(0, 1fr) 72px 26px;
	--optimilk-radius-panel: 20px;
	--optimilk-radius-card: 16px;
	--optimilk-radius-option: 14px;
	--optimilk-transition: all 0.15s ease;

	box-sizing: border-box;
	font-family: var(--optimilk-font-body);
	color: var(--optimilk-ink);
}

.optimilk-steps *,
.optimilk-summary *,
.optimilk-builder * {
	box-sizing: border-box;
}

/*
 * El atributo hidden lo pone el script (stepper, botón de añadir, lista del
 * resumen). Nuestras reglas con display:flex tienen más peso que el [hidden]
 * del navegador, así que hay que reafirmarlo o se ven las dos cosas a la vez.
 */
.optimilk-steps [hidden],
.optimilk-summary [hidden],
.optimilk-builder [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Disposición completa (shortcode todo en uno)
 * ------------------------------------------------------------------------- */

.optimilk-builder {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
	gap: 28px;
	align-items: start;
}

/* ---------------------------------------------------------------------------
 * Pasos
 * ------------------------------------------------------------------------- */

.optimilk-steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.optimilk-panel {
	padding: 24px;
	background: var(--optimilk-card);
	border: 1px solid var(--optimilk-border);
	border-radius: var(--optimilk-radius-panel);
}

.optimilk-panel__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.optimilk-panel__badge {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	background: var(--optimilk-ink);
	color: #fff3ea;
	border-radius: 99px;
	font-size: 15px;
	font-weight: 700;
}

.optimilk-panel__title {
	margin: 0;
	font-family: var(--optimilk-font-ui);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.optimilk-panel__subtitle {
	margin: 0 0 16px 38px;
	font-size: 13px;
	color: var(--optimilk-muted);
}

/*
 * Bajo las opciones, no bajo el título: sin sangría (no cuelga de ningún badge)
 * y con el aire arriba en vez de abajo.
 */
.optimilk-panel__subtitle--after {
	margin: 12px 0 0;
}

/* Frecuencia */

.optimilk-plans {
	/* El aire que antes ponía el subtítulo, que ya no va aquí encima. */
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.optimilk-plan {
	position: relative;
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	gap: 6px 9px;
	align-items: center;
	padding: 16px;
	background: var(--optimilk-card-inactive);
	border: 2px solid var(--optimilk-border-inactive);
	border-radius: var(--optimilk-radius-option);
	cursor: pointer;
	transition: var(--optimilk-transition);
}

.optimilk-plan.is-selected {
	background: var(--optimilk-card-active);
	border-color: var(--optimilk-accent);
}

.optimilk-plan__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.optimilk-plan__dot {
	width: 16px;
	height: 16px;
	background: #fff;
	border: 2px solid var(--optimilk-dot-border);
	border-radius: 99px;
	transition: var(--optimilk-transition);
}

.optimilk-plan.is-selected .optimilk-plan__dot {
	background: var(--optimilk-accent);
	border-color: var(--optimilk-accent);
	box-shadow: inset 0 0 0 2px #fff;
}

/*
 * Anillo de foco solo al navegar con teclado. Con :focus-within saltaba también
 * al hacer clic y, sumado al borde de selección, se veía un borde doble.
 */
.optimilk-plan:has(.optimilk-plan__input:focus-visible) {
	outline: 2px solid var(--optimilk-accent);
	outline-offset: 3px;
}

.optimilk-plan__label {
	font-family: var(--optimilk-font-ui);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.optimilk-plan__note {
	grid-column: 2;
	font-size: 12px;
	line-height: 1.4;
	color: var(--optimilk-muted);
}

/* Grupos de producto */

.optimilk-group + .optimilk-group {
	margin-top: 26px;
}

.optimilk-group__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px;
}

.optimilk-group__name {
	margin: 0;
	font-family: var(--optimilk-font-display);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.optimilk-group__caption {
	font-size: 12px;
	color: var(--optimilk-muted-2);
}

.optimilk-group__rule {
	margin: -6px 0 12px;
	font-size: 12px;
	color: var(--optimilk-muted-2);
}

.optimilk-group__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tarjeta de producto */

.optimilk-card {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 14px;
	align-items: stretch;
	margin: 0;
	padding: 14px;
	background: var(--optimilk-card-bg);
	border: 0;
	border-radius: var(--optimilk-radius-card);
	transition: var(--optimilk-transition);
}

.optimilk-card.is-selected {
	box-shadow: inset 0 0 0 2px var(--optimilk-accent);
}

.optimilk-card.is-locked {
	opacity: 0.55;
}

.optimilk-card__media {
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
}

/*
 * Con el prefijo del contenedor a propósito, igual que los botones: Elementor y
 * WooCommerce declaran `.elementor img` y `.woocommerce img { height: auto }` con
 * la misma especificidad que `.optimilk-card__media img` y cargan después, así que
 * ganaban. Sin esto la foto se renderiza a su alto natural, desborda el recuadro y
 * el overflow la recorta por abajo.
 */
.optimilk-steps .optimilk-card__media img,
.optimilk-builder .optimilk-card__media img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

.optimilk-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.optimilk-card__name {
	margin: 0 0 4px;
	font-family: var(--optimilk-font-ui);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

/* Precio y formato, cada uno en su línea. El formato hereda de aquí el tamaño. */
.optimilk-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.35;
	/* Sobre los fondos de color el gris de apoyo se lee mal: aquí manda el tono oscuro. */
	color: var(--optimilk-ink-2);
}


.optimilk-card__price .woocommerce-Price-amount {
	font-weight: inherit;
	color: inherit;
}

/*
 * El separador entre precio y unidades es una barra dibujada, no un carácter «|»:
 * así no entra en el árbol de accesibilidad (los lectores de pantalla leerían el
 * signo) y se le puede dar alto y grosor propios, que con un borde los marcaba la
 * línea de texto. El aire de la izquierda lo pone el `gap` del párrafo.
 */
.optimilk-card__format::before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 12px;
	margin-right: 10px;
	/*
	 * `currentColor` atenuado en lugar de un beige fijo: así el separador se apoya
	 * siempre en el color del texto y funciona sobre cualquier color de tarjeta,
	 * que los pone el cliente desde el campo y no los conocemos de antemano.
	 */
	background: currentColor;
	opacity: 0.45;
	border-radius: 1px;
	/* Desplaza la base 1px bajo la línea: así la barra queda centrada en el texto. */
	vertical-align: -1px;
}

.optimilk-card__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
}

/*
 * «Añadir» y el stepper se sustituyen el uno al otro en el mismo hueco, así que
 * comparten alto (36px) y ancho (--optimilk-control-width): al cambiar de estado
 * la tarjeta no se mueve. El valor del token es el ancho natural del stepper
 * (2 botones de 28 + etiqueta de 56 + huecos + bordes).
 *
 * Los botones llevan el prefijo del contenedor a propósito: el kit de Elementor
 * estila todos los <button> con `.elementor-kit-4 button` (padding 15px 28px,
 * fondo rojo, radio 30px) y esa regla pesa más que una clase sola.
 */
.optimilk-steps .optimilk-card__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: var(--optimilk-control-width);
	min-height: 36px;
	margin: 0;
	padding: 6px 16px;
	background-color: var(--optimilk-accent);
	color: #fff;
	border: 0;
	border-radius: 99px;
	box-shadow: none;
	font-family: var(--optimilk-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: var(--optimilk-transition);
}

.optimilk-steps .optimilk-card__add:hover:not([disabled]),
.optimilk-steps .optimilk-card__add:focus-visible {
	background-color: var(--optimilk-accent-hover);
	color: #fff;
}

.optimilk-steps .optimilk-card__add[disabled] {
	background-color: var(--optimilk-disabled-bg);
	color: var(--optimilk-disabled-text);
	cursor: not-allowed;
}

.optimilk-steps .optimilk-stepper {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	min-width: var(--optimilk-control-width);
	height: 36px;
	padding: 0 3px;
	background: #fff;
	border: 1.5px solid var(--optimilk-accent);
	border-radius: 99px;
}

.optimilk-steps .optimilk-stepper__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background-color: transparent;
	color: var(--optimilk-accent);
	border: 0;
	border-radius: 99px;
	box-shadow: none;
	font-family: var(--optimilk-font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: var(--optimilk-transition);
}

.optimilk-steps .optimilk-stepper__button:hover:not([disabled]),
.optimilk-steps .optimilk-stepper__button:focus-visible {
	background-color: var(--optimilk-divider);
	color: var(--optimilk-accent-hover);
}

.optimilk-steps .optimilk-stepper__button[disabled] {
	background-color: transparent;
	color: var(--optimilk-dot-border);
	cursor: not-allowed;
}

.optimilk-steps .optimilk-stepper__button.is-hidden {
	visibility: hidden;
}

.optimilk-steps .optimilk-stepper__value {
	flex: 1;
	min-width: 56px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

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

.optimilk-summary {
	position: sticky;
	top: 20px;
	margin: 0;
	padding: 22px;
	background: var(--optimilk-card);
	border: 1px solid var(--optimilk-border);
	border-radius: var(--optimilk-radius-panel);
}

.optimilk-summary__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 16px;
}

.optimilk-summary__title {
	margin: 0;
	font-family: var(--optimilk-font-display);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.optimilk-summary__empty {
	padding: 22px 16px;
	border: 1.5px dashed var(--optimilk-border-dashed);
	border-radius: var(--optimilk-radius-option);
	font-size: 13px;
	line-height: 1.5;
	color: var(--optimilk-muted-2);
	text-align: center;
}

/*
 * Cabecera de la lista. Repite la rejilla de .optimilk-summary__item, incluida la
 * cuarta columna vacía de la «×», para que los rótulos caigan sobre su columna.
 */
.optimilk-summary__columns {
	display: grid;
	grid-template-columns: var(--optimilk-summary-grid);
	gap: 12px;
	align-items: end;
	padding: 0 0 8px;
	border-bottom: 1.5px solid var(--optimilk-border);
	font-family: var(--optimilk-font-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--optimilk-muted-2);
}

.optimilk-summary__columns span:first-child {
	text-align: center;
}

.optimilk-summary__columns span:nth-child(3) {
	text-align: right;
}

.optimilk-summary__items {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.optimilk-summary__item {
	display: grid;
	grid-template-columns: var(--optimilk-summary-grid);
	gap: 12px;
	align-items: center;
	padding: 9px 0;
	border-bottom: 1px solid var(--optimilk-divider);
}

.optimilk-summary__qty {
	font-family: var(--optimilk-font-ui);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	/* Para que «1 ×» y «12 ×» no se descoloquen entre líneas. */
	font-variant-numeric: tabular-nums;
}

.optimilk-summary__name {
	font-size: 13px;
	line-height: 1.3;
}

.optimilk-summary__amount {
	font-size: 13px;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.optimilk-summary .optimilk-summary__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	width: 26px;
	height: 26px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background-color: transparent;
	color: var(--optimilk-remove);
	border: 0;
	border-radius: 99px;
	box-shadow: none;
	font-family: var(--optimilk-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: var(--optimilk-transition);
}

.optimilk-summary .optimilk-summary__remove:hover,
.optimilk-summary .optimilk-summary__remove:focus-visible {
	background-color: var(--optimilk-divider);
	color: var(--optimilk-accent);
}

.optimilk-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-top: 16px;
	padding-top: 12px;
}

.optimilk-summary__total-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.optimilk-summary__total-label {
	font-family: var(--optimilk-font-ui);
	font-size: 15px;
	font-weight: 700;
}

.optimilk-summary__cycle {
	font-size: 12px;
	line-height: 1.3;
	color: var(--optimilk-muted-2);
}

.optimilk-summary__total-amount {
	font-family: var(--optimilk-font-display);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.optimilk-summary__total-amount .woocommerce-Price-amount {
	font-weight: inherit;
}

.optimilk-summary__notice {
	margin: 12px 0 0;
	padding: 10px 12px;
	background: var(--optimilk-divider);
	border-radius: 10px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--optimilk-ink-2);
}

.optimilk-summary .optimilk-summary__submit {
	display: block;
	width: 100%;
	min-height: 0;
	margin: 14px 0 0;
	padding: 16px;
	background-color: var(--optimilk-accent);
	color: #fff;
	border: 0;
	border-radius: 99px;
	box-shadow: none;
	font-family: var(--optimilk-font-ui);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: var(--optimilk-transition);
}

.optimilk-summary .optimilk-summary__submit:hover:not([disabled]),
.optimilk-summary .optimilk-summary__submit:focus-visible {
	background-color: var(--optimilk-accent-hover);
	color: #fff;
}

.optimilk-summary .optimilk-summary__submit[disabled] {
	background-color: var(--optimilk-disabled-bg);
	color: var(--optimilk-disabled-text);
	cursor: not-allowed;
}

.optimilk-summary__legal {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--optimilk-muted-2);
	text-align: center;
}

/* Barra inferior fija en móvil */

.optimilk-mobilebar {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */

@media (max-width: 900px) {

	.optimilk-builder {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.optimilk-plans {
		grid-template-columns: 1fr;
	}

	.optimilk-panel {
		padding: 18px;
	}

	.optimilk-panel__subtitle {
		margin-left: 0;
	}

	.optimilk-summary {
		position: static;
	}

	.optimilk-summary__submit:not(.optimilk-mobilebar__submit),
	.optimilk-summary__legal {
		display: none;
	}

	.optimilk-mobilebar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: var(--optimilk-card);
		border-top: 1px solid var(--optimilk-border);
	}

	.optimilk-mobilebar__total {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}

	.optimilk-mobilebar__label {
		font-size: 11px;
		color: var(--optimilk-muted-2);
	}

	.optimilk-mobilebar__total strong {
		font-family: var(--optimilk-font-display);
		font-size: 20px;
		letter-spacing: -0.02em;
	}

	.optimilk-summary .optimilk-mobilebar__submit {
		width: auto;
		margin: 0;
		padding: 13px 22px;
	}
}