/* Piezas comunes de EasyMac Core: variables con los colores del tema (theme.json) y valores de marca de respaldo, botones, logos de pago y texto solo para lectores */
:root{
	--emx-ink:var(--wp--preset--color--tinta,#212427);
	--emx-muted:var(--wp--preset--color--gris-oscuro,#3B3F42);
	--emx-line:var(--wp--preset--color--borde,#C9CDD1);
	--emx-soft:var(--wp--preset--color--niebla,#F6F7F8);
	--emx-buy:var(--wp--preset--color--compra,#1DD390);
	--emx-res-bg:var(--wp--preset--color--celeste-claro,#A8D5ED);
	--emx-res-ink:var(--wp--preset--color--espacial,#111D4A);
}
.emx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.emx-circ{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--emx-line);background:#fff;color:var(--emx-ink);cursor:pointer;padding:0}
.emx-circ svg{width:18px;height:18px}
.emx-circ:hover{background:var(--emx-soft)}
/* Botones */
.emx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;border:1.5px solid transparent;
	background:var(--emx-buy);color:var(--emx-ink);font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;font-family:inherit;line-height:1.2}
.emx-btn:hover{filter:brightness(.94)}
.emx-btn-line{background:transparent;border-color:var(--emx-ink);color:var(--emx-ink)}
.emx-btn-line:hover{background:var(--emx-ink);color:#fff;filter:none}
.emx-btn[aria-disabled="true"]{opacity:.7;cursor:default}
.emx-btn.is-busy{cursor:progress}
.emx-cdw-go{background:var(--emx-cdw-btn-bg,var(--emx-buy));color:var(--emx-cdw-btn-color,var(--emx-ink))}

/* Logos de pago: chiquitos y sutiles (wireframe v0.12, v138), alto fijo por marca y ancho automático para no deformarlos.
   Con :where() pesan lo mismo que "ul.emx-pay-l img": cada lugar (pie, checkout) puede ajustarlos con una regla simple */
.emx-pay{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 10px}
.emx-pay-t{margin:0;font-size:12px;color:var(--emx-muted,#3B3F42)}
.emx-pay-l{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px}
ul.emx-pay-l img{display:block;width:auto;height:12px}
ul.emx-pay-l :where(.emx-pay-visa) img{height:8px}
ul.emx-pay-l :where(.emx-pay-mastercard) img{height:11px}
ul.emx-pay-l :where(.emx-pay-pse) img{height:14px}
ul.emx-pay-l :where(.emx-pay-sumas) img{height:13px;border-radius:2px}


/* Ícono del carrito (toma el color del header y no cambia al pasar el mouse, como en el wireframe) */
.emx-cart-wrap{display:inline-flex}
.emx-cart-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;color:inherit;text-decoration:none}
.emx-cart-btn .emx-i{width:22px;height:22px}
.emx-cart-btn:hover{color:inherit}
.emx-cart-count{position:absolute;top:4px;right:2px;display:grid;place-items:center;min-width:17px;height:17px;padding:0;border-radius:999px;
	background:var(--wp--preset--color--espacial,#111D4A);color:#fff;font-size:12px;font-weight:700;line-height:1;box-sizing:border-box}
.emx-cart-count[hidden]{display:none}

/* WhatsApp flotante: Erie (el verde es solo para comprar) */
.emx-fab-wrap{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:9980;margin:0!important;transition:opacity .2s,transform .2s}
.emx-fab-wrap.is-right{right:calc(24px + env(safe-area-inset-right,0px))}
.emx-fab-wrap.is-left{left:calc(24px + env(safe-area-inset-left,0px))}
/* Fuera del celular va a 24px de los bordes (wireframe) */
@media (min-width:701px){
	.emx-fab-wrap{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
	.emx-fab-wrap.is-right{right:calc(24px + env(safe-area-inset-right,0px))}
	.emx-fab-wrap.is-left{left:calc(24px + env(safe-area-inset-left,0px))}
}
.emx-fab{display:grid;place-items:center;width:56px;height:56px;border-radius:999px;background:var(--emx-fab-bg,var(--wp--preset--color--tinta,#212427));color:#fff;
	box-shadow:0 8px 20px rgba(33,36,39,.22);text-decoration:none}
.emx-fab-wrap.has-background .emx-fab{background:inherit}
.emx-fab-wrap.has-text-color .emx-fab{color:inherit}
.emx-fab .emx-i{width:28px;height:28px}
.emx-fab-wrap.is-hidden{opacity:0;transform:translateY(12px);pointer-events:none}
html.emx-has-cmp .emx-fab-wrap{bottom:88px}

/* Bloque de logos de pago */
.emx-pay-block.is-left .emx-pay{justify-content:flex-start}
.emx-pay-block.is-right .emx-pay{justify-content:flex-end}