/* =========================================================================
 * Checkout en 3 pasos (carrito incluido) — cosmetica.
 * Solo tokens de STYLEGUIDE. Sin imágenes ni fondos por CSS.
 * ====================================================================== */

/* La página del carrito usa la plantilla de hello-elementor, cuyo .site-main
   está capado a 1140px por `body:not([class*=elementor-page-]) .site-main`
   (0,2,1). Se descapa solo en esta página (doble clase .site-main.site-main =
   0,3,0 para vencerlo) y .cosmetica-co iguala el ancho de la tienda
   (.cosmetica-catalog): var(--ancho-body) con tope 1440px. */
.cosmetica-checkout-page .site-main.site-main {
	max-width: none;
	padding-inline: 0;
}
.cosmetica-co {
	width: var(--ancho-body);
	max-width: 1440px;
	margin-inline: auto;
	padding-block: 70px;
	font-family: var(--fuente-texto);
	color: var(--color-primario);
}
.cosmetica-co *,
.cosmetica-co *::before,
.cosmetica-co *::after { box-sizing: border-box; }

/* ------------------------------------------------------------- Carrito vacío */
.cosmetica-co__empty {
	text-align: center;
	padding: 40px 0;
}
.cosmetica-co__empty-msg {
	font-family: var(--fuente-titulos);
	font-size: 24px;
	margin: 0 0 24px;
	color: var(--color-primario);
}

/* --------------------------------------------------------------- Stepper */
.cosmetica-co__steps {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0 0 44px;
	padding: 0;
}
.cosmetica-co__step {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 0;
	font-family: var(--fuente-texto);
	color: var(--color-primario);
}
.cosmetica-co__step:last-child { flex: 0 0 auto; }
.cosmetica-co__step:not(:last-child)::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	min-width: 24px;
	margin-left: 16px;
	background: var(--color-primario);
}
.cosmetica-co__step-num {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border: 1px solid var(--color-primario);
	border-radius: 0;
	background: transparent;
	font-size: 0.9375rem;
	color: var(--color-primario);
}
.cosmetica-co__step-label { font-size: 0.9375rem; }
.cosmetica-co__step.is-active .cosmetica-co__step-num {
	background: var(--color-primario);
	color: var(--color-fondo-1);
}
.cosmetica-co__step.is-done { cursor: pointer; }
.cosmetica-co__step.is-pending { opacity: 0.4; }
.cosmetica-co__step.is-pending .cosmetica-co__step-num { cursor: default; }

/* ----------------------------------------------------------- Paneles/pasos */
.cosmetica-co__panel { display: none; }
.cosmetica-co[data-step="1"] .cosmetica-co__panel[data-panel="1"],
.cosmetica-co[data-step="2"] .cosmetica-co__panel[data-panel="2"],
.cosmetica-co[data-step="3"] .cosmetica-co__panel[data-panel="3"] { display: block; }

.cosmetica-co__summary--checkout { display: none; }
.cosmetica-co[data-step="2"] .cosmetica-co__summary--checkout,
.cosmetica-co[data-step="3"] .cosmetica-co__summary--checkout { display: block; }

/* --------------------------------------------------------- Layout 60/40 */
.cosmetica-co__cols {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 40px;
	align-items: start;
}
.cosmetica-co__main { min-width: 0; }
/* `min-width: 0` en simetría con `.cosmetica-co__main`: sin él la pista `1fr`
   se resuelve como `minmax(auto, 1fr)` y su mínimo es el min-content del
   resumen, así que se inflaba por encima de su porción y le robaba ancho a la
   tabla del carrito (medido a 1024px: 364px en vez de los 352,6px que le
   tocan). */
.cosmetica-co__summary { position: sticky; top: 24px; min-width: 0; }
@media (max-width: 1023px) {
	.cosmetica-co__cols { grid-template-columns: 1fr; gap: 28px; }
	.cosmetica-co__summary { position: static; }
}

/* --------------------------------------------------------- Tabla carrito */
.cosmetica-cart-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--color-primario);
}
.cosmetica-cart-table th {
	text-align: left;
	padding: 20px 10px 12px;
	border-bottom: 1px solid var(--color-primario);
	font-family: var(--fuente-texto);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-primario);
}
.cosmetica-cart-row td {
	padding: 30px 10px;
	border-bottom: 1px solid var(--color-primario);
	vertical-align: middle;
	font-size: 0.9375rem;
}
.cosmetica-cart-row__thumb img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	display: block;
	background: var(--color-fondo-2);
}
.cosmetica-cart-row__name a {
	color: var(--color-primario);
	text-decoration: none;
}
.cosmetica-cart-row__name a:hover { color: var(--color-secundario); }
.cosmetica-cart-row__cap { color: var(--color-primario); }
.cosmetica-cart-row__price .amount,
.cosmetica-cart-row__subtotal .amount {
	font-weight: 600;
	color: var(--color-secundario);
}
.cosmetica-cart-qty {
	width: 64px;
	height: 40px;
	padding: 0 8px;
	border: 1px solid var(--color-primario);
	border-radius: 0;
	background: var(--color-fondo-1);
	color: var(--color-primario);
	font-family: var(--fuente-texto);
	text-align: center;
}
.cosmetica-cart-remove {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	color: var(--color-primario);
	cursor: pointer;
	transition: color 0.2s ease;
}
/* En hover, reset.css de hello aplica un fondo a `button:hover` (0,1,1) que
   nuestra regla de fondo (0,1,0) no vence: la X quedaba rosa sobre rosa. El
   icono pasa a fondo-1 para que contraste. */
.cosmetica-cart-remove:hover { color: var(--color-fondo-1); }

/* Cupón */
.cosmetica-cart-coupon {
	display: flex;
	gap: 10px;
	margin: 0 0 16px;
}
.cosmetica-coupon-code {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--color-primario);
	border-radius: 0;
	background: var(--color-fondo-1);
	color: var(--color-primario);
	font-family: var(--fuente-texto);
}
.cosmetica-cart-coupons {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cosmetica-cart-coupons li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--color-primario);
	font-size: 0.875rem;
}
.cosmetica-coupon-remove {
	border: 0;
	background: transparent;
	color: var(--color-secundario);
	cursor: pointer;
	font-family: var(--fuente-texto);
	text-decoration: underline;
	padding: 0;
}

/* Carrito responsive: filas como tarjetas */
@media (max-width: 767px) {
	.cosmetica-cart-table thead { display: none; }
	.cosmetica-cart-table,
	.cosmetica-cart-table tbody,
	.cosmetica-cart-row,
	.cosmetica-cart-row td { display: block; width: 100%; }
	.cosmetica-cart-row {
		position: relative;
		padding: 16px 0;
		border-bottom: 1px solid var(--color-fondo-2);
	}
	.cosmetica-cart-row td {
		border: 0;
		padding: 4px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
	}
	.cosmetica-cart-row td::before {
		content: attr(data-th);
		font-weight: 600;
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
	.cosmetica-cart-row__thumb::before,
	.cosmetica-cart-row__remove::before { content: none; }
	.cosmetica-cart-row__remove {
		position: absolute;
		top: 12px;
		right: 0;
		width: auto;
	}
}

/* --------------------------------------------------------- Resumen */
.cosmetica-co__summary-box,
.cosmetica-co__summary--checkout {
	background: var(--color-fondo-2);
	padding: 24px;
}
.cosmetica-co .cosmetica-co__summary-title {
	font-family: var(--fuente-titulos);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 20px;
	color: var(--color-primario);
}
.cosmetica-co__summary-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--color-primario);
}
.cosmetica-co__summary-row--total {
	border-bottom: 0;
	padding-top: 14px;
	font-weight: 600;
	font-size: 1.0625rem;
}
.cosmetica-co__summary-row--total span:last-child { color: var(--color-secundario); }
.cosmetica-co__link {
	display: inline-block;
	margin-top: 14px;
	color: var(--color-primario);
	font-size: 0.9375rem;
	text-decoration: underline;
}
.cosmetica-co__link:hover { color: var(--color-secundario); }

/* --------------------------------------------------------- Botones */
/* La forma, colores, borde, radius, padding, tipografía y hover salen del
   botón global de style.css (look del hero). Acá solo queda lo que es LAYOUT
   propio del checkout. Las variantes --primary / --secondary / --shop ya no
   pintan nada: se mantienen en el HTML por semántica, pero todos los botones
   se ven igual. */
/* Botones que son <a> (Seguir comprando, Ir a la tienda): sin subrayado,
   venciendo las reglas de link de hello/Elementor. */
.cosmetica-co a.cosmetica-co__btn,
.cosmetica-co a.cosmetica-co__btn:hover,
.cosmetica-co a.cosmetica-co__btn:focus {
	text-decoration: none;
}
/* Paso 1 — "Continuar" (izquierda) y "Seguir comprando" (derecha).
   Por defecto apilados y a 100%; en fila con space-between y ancho por
   contenido solo en los anchos donde la fila entra (ver el media query de más
   abajo). Reemplaza a `--block` (100% + display:flex), que solo usaban estos
   dos botones. */
.cosmetica-co__actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
}
.cosmetica-co__actions .cosmetica-co__btn { width: 100%; }
/* La fila solo se aplica donde el contenedor le da el ancho. Los dos botones
   piden 169 + 16 (gap) + 222 = 407px: cada píldora carga 109px fijos de cromo
   (padding 30+75 + borde 2×2) y el texto no achica porque `font-size` es
   `clamp(14px, 1vw, 16px)`, clavado en 14px hasta los 1400px de viewport.
   · 768-1023px: `.cosmetica-co__cols` es de UNA columna a ~90vw → entra sobrada.
   · 1024-1199px: la grilla vuelve a `1.5fr 1fr` y el resumen cae a 353-412px →
     "Seguir comprando" partía en dos líneas y quedaba 22px más alto que
     "Continuar" (medido a 1024 y 1100). Ahí se apilan, como en móvil.
   · 1200px+: el resumen ya mide 416px o más → fila con margen. */
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1200px) {
	.cosmetica-co__actions {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.cosmetica-co__actions .cosmetica-co__btn { width: auto; }
}
.cosmetica-co__btn:disabled,
.cosmetica-co__btn.is-loading { opacity: 0.55; cursor: not-allowed; }
.cosmetica-co__btn:disabled { pointer-events: none; }
.cosmetica-co__nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
}

/* --------------------------------------------------- Campos WooCommerce */
.cosmetica-co .cosmetica-co__step-title,
.cosmetica-co #customer_details h3,
.cosmetica-co .woocommerce-billing-fields > h3,
.cosmetica-co .woocommerce-shipping-fields > h3,
.cosmetica-co .woocommerce-additional-fields > h3 {
	font-family: var(--fuente-titulos);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 20px;
	color: var(--color-primario);
}
.cosmetica-co__section { margin-bottom: 32px; }
.cosmetica-co .form-row { margin: 0 0 16px; padding: 0; }
.cosmetica-co .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.875rem;
	color: var(--color-primario);
}
.cosmetica-co .input-text,
.cosmetica-co input[type="text"],
.cosmetica-co input[type="email"],
.cosmetica-co input[type="tel"],
.cosmetica-co input[type="password"],
.cosmetica-co select,
.cosmetica-co textarea,
.cosmetica-co .select2-container .select2-selection {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--color-primario);
	border-radius: 0;
	background: var(--color-fondo-1);
	color: var(--color-primario);
	font-family: var(--fuente-texto);
	font-size: 0.9375rem;
}
.cosmetica-co textarea { min-height: 96px; }
.cosmetica-co .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 26px;
	color: var(--color-primario);
}

/* Errores inline de validación */
.cosmetica-co__field-error {
	display: block;
	margin-top: 6px;
	font-size: 0.8125rem;
	color: var(--color-secundario);
}
.cosmetica-co__field--error .input-text,
.cosmetica-co__field--error input,
.cosmetica-co__field--error select,
.cosmetica-co__field--error textarea { border-color: var(--color-secundario); }

/* --------------------------------------------------- Order review / envío */
.cosmetica-co .woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}
.cosmetica-co .woocommerce-checkout-review-order-table th,
.cosmetica-co .woocommerce-checkout-review-order-table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--color-primario);
	font-size: 0.9375rem;
	text-align: left;
}
.cosmetica-co .woocommerce-checkout-review-order-table .order-total td,
.cosmetica-co .woocommerce-checkout-review-order-table .order-total th {
	font-weight: 600;
	border-bottom: 0;
}
.cosmetica-co .woocommerce-checkout-review-order-table .amount { color: var(--color-secundario); }
.cosmetica-co ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cosmetica-co ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
}
.cosmetica-co ul#shipping_method .amount { color: var(--color-secundario); }

/* --------------------------------------------------- Pago (#payment) */
.cosmetica-co .wc_payment_methods {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	border: 1px solid var(--color-fondo-2);
}
.cosmetica-co .wc_payment_methods li {
	padding: 14px 16px;
	border-bottom: 1px solid var(--color-fondo-2);
}
.cosmetica-co .wc_payment_methods li:last-child { border-bottom: 0; }
.cosmetica-co .wc_payment_methods label {
	display: inline;
	font-weight: 500;
	margin: 0 0 0 8px;
	cursor: pointer;
}
.cosmetica-co .payment_box {
	margin-top: 12px;
	padding: 12px 0 0;
	font-size: 0.875rem;
	color: var(--color-primario);
}
.cosmetica-co .woocommerce-terms-and-conditions-wrapper { margin: 16px 0 24px; }

/* Botón nativo "Realizar el pedido": solo el ancho. El resto (forma, colores,
   borde, radius, padding, tipografía, hover y flecha) lo pone el botón global
   de style.css. */
.cosmetica-co #payment #place_order,
.cosmetica-co #place_order.button.alt {
	width: 100%;
}

/* --------------------------------------------------- Notices de WooCommerce */
.cosmetica-co .woocommerce-error,
.cosmetica-co .woocommerce-info,
.cosmetica-co .woocommerce-message,
.cosmetica-co .woocommerce-notices-wrapper .is-info,
.cosmetica-co .woocommerce-notices-wrapper .is-error {
	border-top-color: var(--color-secundario);
}