function CartDrawer({ open, onClose, items, onQty, total }) {
  return (
    <>
      <div className={"scrim" + (open ? " open" : "")} onClick={onClose} />
      <aside className={"drawer" + (open ? " open" : "")}>
        <div className="drawer__head">
          <div className="drawer__title">Carrito · {items.reduce((a, i) => a + i.qty, 0)}</div>
          <button className="drawer__close" onClick={onClose}>×</button>
        </div>
        <div className="drawer__body">
          {items.length === 0 && (
            <div style={{ padding: "60px 24px", textAlign: "center", color: "var(--ink-dim)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>
              Tu carrito está vacío.<br/>Agrega algo del drop ★
            </div>
          )}
          {items.map(it => (
            <div key={it.id} className="cart-line">
              <div className="cart-line__img"><Placeholder label="" /></div>
              <div>
                <div className="cart-line__name">{it.name}</div>
                <div className="cart-line__sub">{it.brand}</div>
                <div className="qty">
                  <button onClick={() => onQty(it.id, -1)}>−</button>
                  <span>{it.qty}</span>
                  <button onClick={() => onQty(it.id, +1)}>+</button>
                </div>
              </div>
              <div className="cart-line__price">{fmt(it.price * it.qty)}</div>
            </div>
          ))}
        </div>
        <div className="drawer__foot">
          <div className="drawer__total">
            <span>Subtotal</span>
            <b>{fmt(total)}</b>
          </div>
          <button className="drawer__cta" disabled={items.length === 0} style={items.length === 0 ? { opacity: 0.4, cursor: "not-allowed" } : {}}>
            Checkout seguro →
          </button>
        </div>
      </aside>
    </>
  );
}

Object.assign(window, { CartDrawer });