/* v0.12 · 60-cart1 — reglas nuevas de este frente (se cargan después de theme.css; al final se pegan a theme.css en este orden). */

/* Carrito: 32px bajo el header y 48px antes de "Completa tu Mac", como .cpg del wireframe (en celular, 20px arriba: woo.css) */
main.emx-cart{margin-block-start:0}
.emx-cart > .emx-sec:first-child{padding:32px 0 48px}
.emx-cart .wp-block-post-content > p:empty{display:none} /* párrafo vacío que queda después del carrito en el contenido guardado */
.emx-cart .woocommerce:has(> .emx-cart-form) > .woocommerce-notices-wrapper:empty{display:none} /* sin avisos no ocupa una fila de la grilla */
/* Filas a 16px entre sí y nada debajo de la última: en celular el resumen queda 24px bajo ella (gap de la grilla), como .ci-list */
.emx-cart-row:last-child{margin-bottom:0}
.js-emx .emx-cart-actions{padding-top:0} /* con JS solo guarda el botón oculto "Actualizar carrito" */

/* Carrito: al cambiar unidades no se pinta el velo blanco de WooCommerce (el cambio se ve al instante, como en el wireframe);
   la capa sigue ahí, invisible, para que no se envíe otro cambio mientras recalcula */
.emx-cart .blockUI.blockOverlay{opacity:0!important}

/* Carrito: aviso del tope de unidades bajo el selector (.qty-max del wireframe); theme.js lo muestra al tocar el "+" */
.emx-cart-info .emx-qty-max{margin:4px 0 0;font-size:12px;color:var(--muted)}
.emx-cart-info .emx-qty-max[hidden]{display:none}

/* Carrito: "¿Tienes un cupón?" abierto, con la etiqueta visible y el campo y "Aplicar" en una fila (.c-cp-* del wireframe) */
.emx-coupon[open] summary::after{transform:rotate(90deg)}
.emx-coupon-f label{margin:0;font-size:13px;font-weight:700;line-height:1.5}
.emx-coupon-r{display:flex;gap:8px}
.emx-coupon-f .btn{min-height:44px;padding:0 18px;border-width:2px}

/* Carrito: "Completa tu Mac" con 24px entre tarjetas (escritorio) y entre el título y las tarjetas (celular) */
@media (min-width:768px){.emx-cart-more .emx-rail{gap:24px}}
@media (max-width:767px){.emx-cart-more .emx-rail-head{margin-bottom:24px}}

/* Carrito vacío (carrito.html#vacio): el título y el estado vacío del carrito lateral, centrados en una caja con borde.
   En celular la caja va de borde a borde; el !important vence al margin:auto !important del diseño "constrained" de WordPress */
main.emx-cart > .emx-sec:has(.emx-cart-empty){max-width:none;padding:32px 24px 48px;border:1px solid var(--line);border-radius:20px;text-align:center}
.emx-cart-empty{font-size:16px} /* como en el carrito lateral; el carrito usa 15px de base */
/* Medidas de .c-empty del wireframe: ícono gris medio, "Ver DEALS" de 52px de alto y "Ver MacBook nuevas" de 14px con 44px para tocar */
.emx-cart-empty .emx-cdw-empty-i{color:var(--gray)}
.emx-cart-empty .emx-cdw-empty-btn{padding:12px 26px;border-width:2px;line-height:1.5}
.emx-cart-empty .emx-cdw-link{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:14px}
@media (max-width:781px){
	main.emx-cart > .emx-sec:has(.emx-cart-empty){padding-top:20px;margin-inline:calc(var(--wp--style--root--padding-left,16px) * -1)!important}
}

/* Carrito en celular: barra fija con el total y "Finalizar compra" (#cpbar del wireframe); theme.js la muestra mientras el botón del resumen no se ve */
.emx-cpbar{position:fixed;left:0;right:0;bottom:0;z-index:9970;display:flex;align-items:center;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
	background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(33,36,39,.08)}
.emx-cpbar[hidden]{display:none}
.emx-cpbar-t{display:flex;flex-direction:column;flex:1;min-width:0;margin:0}
.emx-cpbar-t > span{font-size:12px;line-height:1.5;color:var(--muted)}
.emx-cpbar-p{font-size:18px;font-weight:700;line-height:1.1;white-space:nowrap}
.emx-cpbar .btn{min-height:44px;padding:0 22px;font-size:16px}
@media (max-width:359px){.emx-cpbar .btn{padding:0 14px}.emx-cpbar-p{font-size:16px}} /* el total cabe en una línea a 320px */

/* Carrito lateral: "Paga seguro con:" 2px más abajo en el pie (.cdw-foot .pd-pay del wireframe) */
.emx-cdw-foot .emx-pay{margin-top:2px}