/**
 * Carrito lateral 2026 — componente CartDrawer de design-2026/_ds_bundle.js, medida por medida.
 * Todo contenedor flex declara dirección y alineación, y todo <button> declara su caja completa:
 * el tema viejo (Bricks + Automatic.css) las pisa. Prefijo: mpsd-.
 */

.mpsd {
	position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1200;
	overflow: hidden; pointer-events: none; visibility: hidden;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif; color: #111111;
}
.mpsd.mpsd-abierto { pointer-events: auto; visibility: visible; }
/* Al cerrar, el panel sigue visible mientras dura su transición de salida. */
.mpsd.mpsd-saliendo { visibility: visible; }

.mpsd-velo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(11,11,11,0.55); opacity: 0; transition: opacity .35s ease; }
.mpsd-abierto .mpsd-velo { opacity: 1; }

/* Doble clase: wp-components (la carga el sitio en el frontend) trae reglas de posición para
   [role] con la especificidad de una clase sola. */
.mpsd .mpsd-panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
	display: flex; flex-direction: column; align-items: stretch;
	background: #FFFFFF; box-shadow: -12px 0 40px rgba(0,0,0,0.18);
	transform: translateX(105%); transition: transform .42s cubic-bezier(.2,.7,.25,1);
	outline: none;
}
.mpsd-abierto .mpsd-panel { transform: none; }
body.admin-bar .mpsd .mpsd-panel { top: 32px; }

.mpsd-contenido { display: flex; flex-direction: column; align-items: stretch; flex: 1; min-height: 0; transition: opacity .15s ease; }
.mpsd-cargando .mpsd-contenido { opacity: 0.55; pointer-events: none; }

/* ---- Cabecera ---- */
.mpsd-cab { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #E4E2E0; flex: none; }
.mpsd-titulo { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #111111; }
.mps-2026 .mpsd-cerrar {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; flex-direction: row; align-items: center; justify-content: center; flex: none;
	width: 34px; height: 34px; min-width: 0; min-height: 0; margin: 0; padding: 0;
	border: 1px solid #E4E2E0; border-radius: 2px; background: #FFFFFF; box-shadow: none;
	color: #111111; font-size: 16px; font-weight: 700; line-height: 1; text-align: center; cursor: pointer;
	transition: border-color .15s ease;
}
.mps-2026 .mpsd-cerrar:hover { border-color: #111111; background: #FFFFFF; color: #111111; }

/* ---- Barra de envío gratis (apagada por defecto; usa el umbral real de WooCommerce) ---- */
.mpsd-envio { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 22px; border-bottom: 1px solid #E4E2E0; flex: none; font-size: 12.5px; font-weight: 600; }
.mpsd-envio b { color: #C73D2C; font-weight: 700; }
.mpsd-envio-ok { color: #C73D2C; }
.mpsd-envio-barra { display: block; height: 6px; background: #F5F4F2; border-radius: 999px; overflow: hidden; }
.mpsd-envio-barra i { display: block; height: 100%; background: #C73D2C; border-radius: 999px; transition: width .5s cubic-bezier(.2,.7,.3,1); }

/* ---- Ítems ---- */
.mpsd-items { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 22px; display: flex; flex-direction: column; align-items: stretch; }
.mpsd-item { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #F5F4F2; flex: none; }
.mpsd-item-img { width: 64px; height: 64px; background: #F5F4F2; border-radius: 4px; display: flex; flex-direction: row; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.mpsd-item-img img { width: 56px; height: 56px; object-fit: contain; display: block; }
.mpsd-item-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; flex: 1; }
.mpsd-item-nombre { font-size: 13.5px; font-weight: 700; color: #111111; line-height: 1.25; text-transform: uppercase; letter-spacing: -0.01em; text-decoration: none; overflow-wrap: anywhere; }
.mpsd-item-nombre:hover { color: #C73D2C; }
.mpsd-item-var { font-size: 11px; font-weight: 600; color: #8A8782; }
.mpsd-qty { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.mps-2026 .mpsd-qty button {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
	width: 26px; height: 26px; min-width: 0; min-height: 0; margin: 0; padding: 0;
	border: 1px solid #E4E2E0; border-radius: 2px; background: #FFFFFF; box-shadow: none;
	color: #111111; font-size: 14px; font-weight: 700; line-height: 1; text-align: center; cursor: pointer;
	transition: border-color .15s ease;
}
.mps-2026 .mpsd-qty button:hover { border-color: #111111; background: #FFFFFF; color: #111111; }
.mps-2026 .mpsd-qty button[disabled] { opacity: 0.35; cursor: not-allowed; }
.mpsd-qty b { min-width: 16px; text-align: center; font-size: 13px; font-weight: 700; color: #111111; }
.mpsd-item-total { font-size: 14.5px; font-weight: 700; color: #C73D2C; white-space: nowrap; flex: none; }

.mpsd-vacio { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #8A8782; }
.mpsd-vacio span { font-size: 34px; font-weight: 300; text-transform: uppercase; letter-spacing: -0.02em; }
.mpsd-vacio p { margin: 0; font-size: 13px; }

/* ---- Pie ---- */
.mpsd-pie { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 22px 22px; border-top: 1px solid #E4E2E0; flex: none; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.mpsd-ahorro, .mpsd-subtotal { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
.mpsd-ahorro { font-size: 12.5px; font-weight: 700; color: #C73D2C; }
.mpsd-subtotal { font-size: 15px; font-weight: 800; text-transform: uppercase; color: #111111; }
.mpsd-cta {
	display: flex; flex-direction: row; align-items: center; justify-content: center; height: 54px;
	background: #C73D2C; color: #FFFFFF; text-decoration: none; border-radius: 2px;
	font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	transition: background-color .15s ease;
}
.mpsd-cta:hover { background: #B23425; color: #FFFFFF; }
.mpsd-cta-off, .mpsd-cta-off:hover { background: #0B0B0B; color: #FFFFFF; }
.mpsd-links { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; }
.mpsd-links a { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #111111; text-decoration: underline; text-underline-offset: 3px; }
.mpsd-links a:hover { color: #C73D2C; }

/* El sitio trae `*:focus { outline: none !important }`: el foco visible se declara a mano. */
.mpsd a:focus-visible, .mpsd button:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: 2px; }

/* Con el panel abierto no se desplaza el fondo, y la burbuja de chat del sitio (z-index 9999) no lo tapa. */
html.mpsd-lock, html.mpsd-lock body { overflow: hidden; }
html.mpsd-lock .wpsr-fm-chat-wrapper { display: none !important; }

@media (max-width: 782px) { body.admin-bar .mpsd .mpsd-panel { top: 46px; } }
@media (max-width: 600px) {
	body.admin-bar .mpsd .mpsd-panel { top: 0; }
	.mpsd-cab, .mpsd-envio { padding-left: 18px; padding-right: 18px; }
	.mpsd-items { padding: 8px 18px; }
	.mpsd-pie { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.mpsd-velo, .mpsd .mpsd-panel, .mpsd-envio-barra i { transition: none; }
}