/* Carrito lateral (EasyMac Core). Los colores salen del tema (theme.json) y, si el dueño los cambió en EasyMac → Carrito lateral, de esos ajustes */
.emx-cdw{
	position:fixed;inset:0;z-index:100000;display:flex;justify-content:flex-end;padding:12px;
	font-family:var(--wp--preset--font-family--montserrat,inherit);color:var(--emx-ink);line-height:1.45
}
.emx-cdw[hidden]{display:none}
/* Velo suave; el panel entra deslizándose desde fuera de la pantalla, sin fundido: abre en .28s y cierra en .2s (wireframe) */
.emx-cdw-shade{position:absolute;inset:0;background:rgba(33,36,39,.16);opacity:0;transition:opacity .28s}
.emx-cdw-panel{position:relative;display:flex;flex-direction:column;width:min(420px,100%);height:100%;background:var(--emx-cdw-bg,#fff);border-radius:24px;
	box-shadow:0 20px 48px rgba(33,36,39,.14);transform:translateX(calc(100% + 24px));transition:transform .2s cubic-bezier(.22,.61,.36,1);overflow:hidden}
.emx-cdw.is-on .emx-cdw-shade{opacity:1}
.emx-cdw.is-on .emx-cdw-panel{transform:none;transition-duration:.28s}
/* Con "menos movimiento", solo un fundido corto */
@media (prefers-reduced-motion:reduce){
	.emx-cdw-panel{transform:none;opacity:0;transition:opacity .12s}
	.emx-cdw.is-on .emx-cdw-panel{opacity:1}
	.emx-cdw-shade{transition:none}
}
html.emx-lock{overflow:hidden}
.emx-cdw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:8px 16px 8px 32px;border-bottom:1px solid var(--emx-line)}
.emx-cdw-t{margin:0;font-size:20px;font-weight:700;line-height:1.45;letter-spacing:normal;color:var(--emx-ink)}
.emx-cdw-t:focus{outline:none}
.emx-cdw-head .emx-circ svg{width:20px;height:20px;stroke-width:2}
.emx-cdw-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 32px 32px}
.emx-cdw-foot{display:flex;flex-direction:column;gap:8px;padding:14px 32px;border-top:1px solid var(--emx-line);background:var(--emx-cdw-bg,#fff)}
.emx-cdw-foot[hidden]{display:none}
.emx-cdw-load{color:var(--emx-muted);font-size:14px}
:where(.emx-cdw,.emx-preview) :focus-visible{outline:3px solid var(--wp--preset--color--celestial-profundo,#006A9A);outline-offset:2px}

/* Filas */
.emx-cdw-list{list-style:none;margin:0;padding:0}
.emx-ci{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--emx-line)}
.emx-ci-img{width:72px;height:72px;border-radius:12px;border:1px solid var(--emx-line);object-fit:contain;background:#fff;display:block}
/* Columna de texto en flex con 4px entre piezas: el aviso de reserva ocupa todo el ancho */
.emx-ci-info{min-width:0;display:flex;flex-direction:column;gap:4px}
/* El nombre es un encabezado, no un enlace (wireframe): recibe el foco al agregar o quitar productos */
.emx-ci-n{margin:0;font-size:15px;font-weight:700;line-height:1.35;letter-spacing:normal;text-wrap:wrap;color:var(--emx-ink)}
.emx-ci-n:focus{outline:none}
.emx-ci-n:focus-visible{outline:3px solid var(--wp--preset--color--celestial-profundo,#006A9A);outline-offset:2px}
.emx-ci-s{margin:0;font-size:13px;line-height:1.45;color:var(--emx-muted)}
.emx-ci-res{display:inline-block;margin:6px 0 0;padding:4px 10px;border-radius:8px;background:var(--emx-res-bg);color:var(--emx-res-ink);font-size:13px;font-weight:700}
.emx-ci-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:8px}
.emx-ci-pr{text-align:right}
.emx-ci-p{margin:0;font-size:16px;font-weight:700;white-space:nowrap}
.emx-ci-save{margin:2px 0 0;font-size:12px;font-weight:700;line-height:1.45;white-space:nowrap}
.emx-qty{display:inline-flex;align-items:center;border:1px solid var(--emx-line);border-radius:999px;flex:none}
.emx-qty-b{position:relative;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:none;color:var(--emx-ink);cursor:pointer}
.emx-qty-b::after{content:"";position:absolute;inset:-4px}
.emx-qty-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.emx-qty-b:hover{background:var(--emx-soft)}
.emx-qty-b[aria-disabled="true"]{color:var(--emx-line);cursor:default;background:none}
.emx-qty-n{min-width:24px;text-align:center;font-size:14px;font-weight:700}
.emx-qty-max{margin:4px 0 0;font-size:12px;color:var(--emx-muted)}

/* Venta cruzada: cada sugerencia en una tarjeta con borde */
.emx-cx{display:flex;flex-direction:column;gap:12px;padding:24px 0 8px}
.emx-cx-t{margin:0;font-size:16px;font-weight:700;line-height:1.45}
.emx-cx-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.emx-cxs{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--emx-line);border-radius:16px}
.emx-cxs img,.emx-cxs > span{width:56px;height:56px;padding:4px;border-radius:12px;border:1px solid var(--emx-line);object-fit:contain;background:#fff}
.emx-cxs-i{min-width:0}
/* Nombre como texto, no enlace (p.cxs-n del wireframe) y precio */
.emx-cxs-n{margin:0;font-size:13px;font-weight:700;line-height:1.3;color:var(--emx-ink)}
.emx-cxs-p{margin:2px 0 0;font-size:13px;font-weight:700;line-height:1.45}
.emx-cxs-add{min-height:44px;padding:0 16px;font-size:13px;border-width:2px}
.emx-cxs-add:hover{background:var(--emx-buy);border-color:var(--emx-buy);color:var(--emx-ink)}

/* Pie */
.emx-cdw-ship{margin:0;font-size:13px;color:var(--emx-muted)}
.emx-cdw-ship b{font-weight:700;color:var(--emx-ink)}
.emx-cdw-total{display:flex;justify-content:space-between;align-items:baseline;margin:0;font-size:16px;font-weight:700}
.emx-cdw-total b{font-size:22px;font-weight:700}
.emx-cdw-foot .emx-btn{width:100%}
/* "Finalizar compra": 52px de alto y borde de 2px, como los botones del wireframe */
.emx-cdw-foot .emx-cdw-go{min-height:52px;padding:12px 26px;border-width:2px}
/* "Ver carrito": secundario sutil, relleno gris sin borde */
/* "Ver carrito": botón secundario del tema (blanco, borde gris de 2px; Celeste claro al pasar). Aquí solo su tamaño (dueño, 11 nov 2026) */
.emx-cdw-foot .emx-cdw-see{min-height:44px;padding:0 20px;font-size:15px}

/* Vacío y error */
.emx-cdw-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:40px 8px}
.emx-cdw-empty-i{width:48px;height:48px;color:var(--wp--preset--color--gris,#7A8085);margin-bottom:6px}
.emx-cdw-empty p{margin:0;color:var(--emx-muted)}
.emx-cdw-empty .emx-cdw-empty-t{font-size:18px;font-weight:700;color:var(--emx-ink)}
/* "Ver DEALS": borde de 2px y la línea de su contenedor, como .btn del wireframe (51px en el panel; 52px en la página del carrito) */
.emx-cdw-empty-btn{margin-top:14px;padding:12px 26px;border-width:2px;line-height:inherit;background:var(--emx-cdw-empty-bg,var(--emx-buy))}
/* Enlaces de texto ("Ver MacBook nuevas", "Ir a mi carrito"): 14px con 44px de área táctil */
.emx-cdw-link{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:14px;color:var(--emx-cdw-link,var(--emx-ink));font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* Error al agregar: caja gris sin borde; la lista empieza justo debajo */
.emx-cdw-err{display:flex;flex-direction:column;gap:10px;margin:0;padding:16px;border-radius:16px;background:var(--emx-soft)}
.emx-cdw-err p{margin:0;font-size:14px;font-weight:400;line-height:1.45}
.emx-cdw-err-a{display:flex;flex-wrap:wrap;gap:8px}
.emx-cdw-err .emx-btn{min-height:44px;padding:0 18px;border-width:2px}

/* "Agregando…": el botón que agrega muestra un giro mientras responde la tienda (más específico que .btn[aria-disabled] del tema).
   Las sugerencias del panel (data-emx-stay) solo se atenúan, sin giro, para no cambiar de ancho */
:is(.btn,.emx-btn).is-busy[aria-disabled="true"]{opacity:.75;cursor:progress;filter:none}
:is(.btn,.emx-btn).is-busy[aria-disabled="true"]:not([data-emx-stay])::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;box-sizing:border-box;animation:emxSpin .7s linear infinite}
@keyframes emxSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){:is(.btn,.emx-btn).is-busy[aria-disabled="true"]:not([data-emx-stay])::before{animation:none;border-right-color:currentColor;opacity:.5}}

/* Móvil: el panel flota y deja ver una franja de la página; tocarla cierra */
@media (max-width:767px){
	.emx-cdw{padding:8px}
	.emx-cdw-panel{width:calc(100% - 24px)}
	.emx-cdw-head{padding-left:16px}
	.emx-cdw-body,.emx-cdw-foot{padding-inline:16px}
}
/* Celulares de menos de 375px: el precio y "Ahorras" (sin partir) pasan debajo del selector para no desbordar el panel */
@media (max-width:374px){
	.emx-ci-bot{flex-wrap:wrap}
	.emx-ci-pr{margin-left:auto}
}

/* Vista previa del administrador */
.emx-preview{display:flex;flex-wrap:wrap;gap:24px;margin:12px 0 24px}
.emx-preview .emx-cdw{position:static;padding:0;z-index:auto;width:360px;height:auto}
.emx-preview .emx-cdw-panel{transform:none;opacity:1;height:auto;min-height:420px;border:1px solid #dcdcde}

/* Carrito lateral (dueño, 9 nov 2026): "Complementa tu Mac" se desliza de lado (una tarjeta al 88% del ancho, con puntos debajo; el
   activo en Celestial), sin cuadrado dentro del cuadrado: las fotos van sobre blanco con radio de 12px y sin borde, y las sugerencias se
   separan con una línea. "Agregar" neutro en reposo y verde al interactuar. El aviso de reserva de la fila es una línea de 12px gris con
   el plazo en Bold, sin píldora. El foco pasa a Celestial (el #006A9A se descartó) */
:where(.emx-cdw,.emx-preview) :focus-visible,.emx-ci-n:focus-visible{outline-color:var(--wp--preset--color--celestial,#2695D1)}
.emx-ci-img{border:0;border-radius:12px;background:#fff}
.emx-ci-res{display:block;margin:6px 0 0;padding:0;border-radius:0;background:none;font-size:12px;font-weight:400;color:#5A5F69}
.emx-ci-res b{font-weight:700;color:var(--emx-ink)}
.emx-cx-l{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -32px;padding:0 32px 2px;scroll-padding:0 32px}
.emx-cx-l::-webkit-scrollbar{display:none}
.emx-cx-l > li{scroll-snap-align:start;min-width:0}
.emx-cxs{padding:10px 0;border:0;border-top:1px solid var(--emx-line);border-bottom:1px solid var(--emx-line);border-radius:0}
.emx-cxs img,.emx-cxs > span{padding:0;border:0;border-radius:12px;background:#fff}
.emx-cxs-add{background:#fff}
.emx-cxs-add:hover,.emx-cxs-add:focus-visible{background:#57E0B1;border-color:#57E0B1;color:var(--emx-ink)}
.emx-cxs-add:active{background:#91EDD3;border-color:#91EDD3}
.emx-cx-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.emx-cx-dots i{width:6px;height:6px;border-radius:50%;background:#C9CDD1;transition:width .2s}
.emx-cx-dots i.on{width:18px;border-radius:3px;background:var(--wp--preset--color--celestial,#2695D1)}
@media (max-width:700px){.emx-cx-l{margin:0 -16px;padding:0 16px 2px;scroll-padding:0 16px}}
@media (prefers-reduced-motion:reduce){.emx-cx-dots i{transition:none}}
/* "Agregar" de los complementos (dueño, 11 nov 2026): contorno gris de 2px como el secundario, pero verde de compra al pasar, enfocar o tocar */
.emx-cxs-add{background:#fff;border:2px solid #7A8085;color:var(--emx-ink);font-weight:700}